Semantic HTML describes the meaning and structure of website content; without it, people using assistive technology like screen readers can’t navigate or understand your website. Test your website's semantic HTML by using a screen reader to identify and fix problems with your semantic HTML.
Semantic HTML is code used to describe the meaning and structure of content on a website. They describe the purpose of the content rather than how it looks.
This identifies and defines areas of a webpage, making it possible for users using assistive tech like screen readers to navigate and understand.
Aside from creating an accessible website for people using assistive technology, semantic HTML can also:
Improve SEO - Search engines prioritise websites with a clear, semantic structure
Make maintenance easier - Semantic HTML is easy to read, and therefore easy for developers to maintain and collaborate with
Adapt to future tech - It is compatible across browsers and devices, making it easily adaptable to future platforms
Screen reader accessibility - Semantic HTML structure, descriptive alt text and labels, and properly defined ARIA roles help screen readers accurately interpret your site, making it easier for visually impaired users to navigate and understand your content
The easiest way to check is by using assistive technologies on your website. There are countless screen reader Chrome extensions and apps that you can use to check your website.
For a more manual approach, check the following principles to ensure your site is structured properly:
Structuring headers
Start by checking that all your headers are tagged in HTML and not just larger or bold text style. These will help signpost content, helping users navigate through in order of importance.
Ensure you’re using heading types in correct orders, starting with a H1, then H2s beneath that and H3s below that to represent the hierarchy of the content.
Descriptive link text
When hyperlinking within content or buttons, use wording that explains where the link leads. Avoid vague choices like ‘Read more’ and instead try ‘Learn more about semantic HTML’.
The same principle applies to buttons. Rather than a button labelled ‘Download’, use ‘Click here to download financial report’ so users understand exactly what action they’re taking.
Alt text and descriptive labels
Adding descriptive labels and alt text to images and video content is common practice for many businesses, but it is easy to get it wrong. Remember, this text gives users who cannot view the content context of what is in the image or video.
Be specific, descriptive, but also concise. Avoid keyword stuffing or redundant wording like ‘Image of’, etc. For example, changing ‘image of coffee’ to ‘Frothy cappuccino in a white cup’.
Partnering with agencies like us can help to cover all bases from an accessibility point of view. We partner with AudioEye to assess websites, identify accessibility issues through AI, tech and real user testing and help implement solutions that meet WCAG standards, all while keeping your branding and design intact.
Let’s chat about how we can help you take your first steps towards digital accessibility.
Proud to partner with
