Skip to main content

Create Accessible Headings

Accessible Headings

Proper heading structure plays an important role in the accessibility of your website as well as for your PDF or Word documents. A user navigating your site with a screen reader uses headings to find the content they are most interested in. By using clear and consistent structure for headings, you enable all users to easily scan and find content. 

Heading markup

The first thing to remember for headings is that if text acts like a heading either visually or structurally, it should be designated as such using proper headings tags e.g. <h1>, <h2>, <h3>, etc. A common mistake is for content editors to use bold tags (<b>, </b>) or all caps as a visual heading. This is not proper semantic markup and should always be avoided. 

Outlines and hierarchy 

From both an accessibility perspective as well as a content strategy perspective, it’s important to develop a logical progression to your content and organize it with properly nested headings. Properly nested headings mean that you should not skip any heading levels i.e. <h1> followed by an <h3>. The subheading for a <h1> should always be <h2> and so on. By creating a logical flow and relationship between headings, you’ll help those navigating by a screen reader to find relevant content quickly and easily. 

Using <h1>

Every page on your site should have a <h1>. In general, it’s good practice to limit your page to just one <h1> which serves as your page title. 

Changing heading sizes

If you don’t like the size of a particular heading tag, for example you’ve applied h2’s to your page’s sub-headings but you prefer the size or look of h3’s. In this circumstance you should work with a developer to update the style sheet for your site and give your h2’s the size you prefer. Similarly, you can do the same thing in Word by navigating to the “Styles Pane” and updating the styles applied to particular heading sizes. 

Accurate, informative, concise

Most readers will be scanning your headings quickly so it’s good practice to keep it short, skipping any unneeded words. Include enough information so that people understand the context of a given section even if they landed there directly from a Google search. Avoid using jargon as much as possible and definitely avoid duplicate headings (e.g. “More Details”). Think of your headings as section labels rather than as statements.  

Double-check your work

The final step for ensuring good heading structure is to make use of accessibility tools to confirm that no issues are flagged. Your content management system, like Drupal or WordPress, may have an accessibility checker already built-in. If not, run the page through a checker like the WAVE accessibility plugin. Newer versions of Word and Adobe Acrobat should also have an accessibility checker that can verify proper heading structure of your documents. 

Was this page helpful?

Your feedback helps improve the site.

Comments?