The structure of headings and subheadings is one of the most important elements of web design, not just for people with disabilities, but also for making your content more scannable by all audiences. The latest version of WCAG defines several recommended techniques for defining headings, labels, and section headings to improve navigation across the full range of internet-enabled devices.
Leverage Headings to Organize the Structure of Your Content
Reading on a screen is a very different experience than reading in print, which is why web-friendly content is its own area of focus. The differences are particularly significant for those with disabilities. For example, those who are visually impaired might use screen readers to turn text into speech, and those screen readers rely partially on the heading structure of your website for navigating content and relaying information to the user in a logical sequence.
Fortunately, making your content more accessible to screen readers is largely a matter of making it more web-friendly overall. Necessary steps, such as creating heading tags, are already supported by core HTML and CSS functions. By strategically using heading tags, such as <h1> and <h2>, you’ll make your content easier to navigate for screen readers and everyone else.
Adhering to the correct order of headings, as defined by relevant HTML tags, is especially important. Headings are meant to improve a web page’s usability, rather than simply look the part:
- <h1> elements are meant to define the primary heading of a page, such as the title of a blog post. As such, they invariably use a larger typeface than any other headings or other page elements, and they should never be used for sectional headings or any other content.
- <h2> elements are typically used as subsection headings for organizing the structure of your web pages into more easily digestible chunks. However, you should always use these tags for secondary headings, rather than primary or tertiary ones, because skipping levels can confuse screen reader software.
- All headings and subheadings should be descriptive as such that they provide users with a concise overview of the topic that follows. This allows users to better identify the content they’re most interested in reading by skimming through the article.
What Are the Specific Benefits of an Optimal Heading Structure?
An optimally designed heading structure that’s consistent throughout your website provides many important benefits to all your users, as well as to the search engine robots that determine your ever-important search rankings and, ultimately, your visibility. Heading structure is partly what defines web-friendly content and creates a good user experience. After all, not many people want to be confronted with a wall of text when they read a blog post or other web page. In fact, way back in 1997, web designers were already aware that most people scan through online content, rather than read it word-for-word.
In the case of those with disabilities, an appropriate headline hierarchy presents some even more important benefits:
- Those with learning disabilities or limited short-term memory will be able to use headings to better understand the overall structure and content of the page.
- Those using the keyboard to navigate a web page will be able to easily skip from one section to the next.
- People using screen readers will know where they are on a web page while also being able to identify the purpose of each section.
When Should You Use Subsection Headings?
Of course, every page should have a clear title defined by the <h1> tag, but are subsection headings always necessary? In most situations, such as blog posts, product descriptions, landing pages, and homepages, subsection headings are essential, but there’s no reason to overuse them. For example, adding additional subheadings might not be suitable for documents that were originally written for print.
Subheadings are most important in longer documents, such as articles and blog posts longer than around 400 words, as well as any content that covers multiple topics. Documents spanning 1,000 words or more might also make use of the <h3> tag to define subchapters of individual chapters, which themselves would be defined by the <h2> tag. Ultimately, headings are all about structuring your content in a way that makes navigation and readability intuitive and accessible to everyone.
