The case for accessibility
Headings can be easily overlooked when designing a new website or updating your old one. Marketers tend to focus more on the aesthetical side of the design and less on the practical side. It’s true that the visual elements play an important role in a website’s user experience (UX), however making it more accessible to users with sight disabilities can increase the number of visitors that convert.
The statistics strengthen our case for accessibility:
- approximately 253 million people worldwide suffer from a vision impairment
- every day 250 people start to lose their sight in the UK
- more than 2 million people in the UK live with sight loss that has a significant impact on their daily lives e.g. inability to drive
- age-related degeneration is the leading cause of blindness in adults.
With 4.1 million people expected to be affected by sight loss in the UK by 2050, businesses can’t afford not to adapt their websites to all audiences. This is especially important if their target market is an older demographic, which is more likely to experience sight problems.
A simple aspect like using headings correctly can make a huge difference and it’s not difficult to apply. It could also save you the costs of going through a lawsuit.
Domino’s case
Domino’s Pizza is a good example of how neglecting accessibility for visually impaired users can be costly.
A blind US customer filed a complaint in 2016 after struggling to choose toppings, use a discount code and even complete his order on the restaurant’s iPhone app. The issue was that the app didn’t integrate with the phone’s screen-reading software, which vocalises content based on text being used correctly and images being tagged with text. The company’s app and website lacked the correct code to allow the iPhone to read out the options.
While the judges sided with Domino’s initially, the appeal court ruled in the customer’s favour just last week on the grounds that “The alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises – which are places of public accommodation”.
In the UK, the Royal National Institute of Blind People also welcomed the ruling commenting for the BCC: “All organisations have a responsibility under the Equality Act 2010 to ensure that their websites and apps can be used by blind and partially sighted people, including those who use screen readers”.
There are different ways in which businesses can make their websites more accessible and using heading tags correctly goes a long way to helping a user navigate a page.
Headings best practice for accessibility
There is quite a bit of confusion and misuse of headings, partly due to developers following a design too closely or designers not being aware of the correct way to use headings.
If you are unsure of what a heading is then W3C has a good definition and Yoast explains its SEO use.
W3C defines the correct usage as:
[blockquote cite=”” ]”The six heading elements, H1 through H6, denote section headings. Although the order and occurrence of headings is not constrained by the HTML DTD, documents should not skip levels (for example, from H1 to H3), as converting such documents to other representations is often problematic.”[/blockquote]
Not only does the correct use of headings have an impact on how people and Google read your page, it also has a huge impact on how screen readers present your content to the user. People using accessibility tools can navigate the page via your headings, so if you have something important to say then it should be structurally and visually laid out as you intended it to be.
There is no extra work needed to make headings accessible when you are creating your page. If you follow the correct usage then the accessibility criteria will be met. W3c accessibility advice for headings explains this quite well, and as you can see, it not only makes sense for accessibility but it makes sense structurally and visually.
How do I check the headings?
If your developers or theme follow the correct use of headings then you should be able to simply add your content and add your heading in the correct manner via your editor/CMS.
As a side note you do not need to add headings everywhere, a simple H1 (which is usually the page title) followed by an H2 would be enough – but lets say you want to correctly structure a particularly long page or you are checking somebody else’s work? Try using one of these plugins for your favourite browser:
Once installed they are very easy to use and any incorrect headings show up highlighted in red in the sidebar when you click the plugin button. This feature will also be a default option in the Gutenberg editor in the WordPress 5.0 release and is explained on this site.
The correct way to use headings:
[panel type=”callout” ]
<h1>Usually your page title</h1>
<p>Some paragraph text here</p>
<h2>The next important section of your page</h2>
<p>Some paragraph text here</p>
<h3>Something not so important but related to the h2 above</h3>
<p>Some paragraph text here</p>
<h2>The next important section of your page</h2>
[/panel]
The incorrect way to use headings:
[panel type=”callout” ]
<h1>Usually your page title</h1>
<p>Some paragraph text here</p>
<h3>The next important section of your page</h3>
<p>Some paragraph text here</p>
<h2>Something not so important but related to the h3 above</h2>
<p>Some paragraph text here</p>
<h4>The next important section of your page</h4>
[/panel]
The image below shows headings used for styling rather than structure. This will cause markup errors and would be semantically incorrect – avoid using them like this!
Hopefully this post will now help you to correctly structure your web pages for everybody.
