Five Minute Accessibility: Headings
It seems that a lot of frontend developers either don’t know about coding for accessibility or they don’t care. Of course, it can be hard to implement in organizations where there is no focus on accessibility but it’s always a developer’s (and designer’s) responsibility to develop an inclusive web.
In the series Five Minute Accessibility I will introduce one simple thing you can do as a developer to improve accessibility in your projects.
Headings
Most developers has stopped thinking about the use of headings which has resulted in inconsistent use of headings. They are used for organising the content of a web page and if used correctly headings are helpful for users of assistive technologies by providing in-page navigation.
The most important thing to do is to correctly nest headings. This might sound obvious but a lot of people get this wrong. Headings should be nested by rank so that <h1> is the most important rank and <h6> the least important rank. By following this rule skipping ranks are forbidden. Developers should not make an <h2> followed by an <h4>. This is confusing and annoying for people using assistive technologies. However it is allowed to skip ranks when closing subsections as they are not related in terms of page organization.
Examples
And you might say: “Duh, this is obvious!” — and yes it is. But so many developers get it wrong. Try using the accessibility tool called Tota11y and test your own work as well as popular sites.
Stay tuned for more.
You can follow me on Twitter.
