Heading Toward Accessibility

Heading Toward Accessibility

The goal of a well-designed website is to attract a user and keep that user returning to the website. In this world of ever-decreasing attention spans, users will scan a page visually to quickly review and access the sections or components of the website they need. Blind users are no different which is why designers and developers should understand the importance of accessibility. 

For all users, web designers can use headings to label the different sections of their websites. For the sake of accessibility, blind users can efficiently navigate a website with a screen reader by using the headings available to scan the page. 

A heading describes the content that follows and informs the user clicking on it will take them to a separate page that will generally provide greater detail as it relates to that piece of information. A page heading describes the overall page content, while subheadings describe the content within sections (and subsections) of the page.

Headings are usually of a unique style with a different size, color, and/or weight than the body text. The size of the heading text determines its level in the heading hierarchy. A page heading is usually the largest heading, with each subsequent subheading level decreasing in size or weight.

Imagine a news article with the article title at heading level 1 with a large, bold font. Any subsection within the article should be identified as a level 2 or smaller with a smaller font but yet still bigger than the body text, depending on the outline of the article. Headings may also be used to label a group of links or a form.  

Although the style of the heading may catch the eye of the visual reader, it does not provide the importance of accessibility for the blind user. The web designer must use semantic markups to label the text of the heading so the screen reading software recognizes the intended heading from the body text. 

Examples of screen reading software are JAWS, NVDA, Narrator, and Voiceover. Blind and visually impaired people use these to navigate on their computer or mobile device. Using specific keyboard commands or gestures, blind users can jump the focus of the text-to-speech to each heading so they can quickly assess what is available on the site. 

Not only should headings be programmed correctly so accessibility software can recognize them as headings, but the text of the heading should be clear and concise so that the reader understands what is to follow. They are there to let the reader, both blind and sighted, know what the page is about and what it contains.

Here are some development best practices for using headings correctly.

Page sections, landmarks, and ARIA labels

Web content should be organized into sections. A heading should be used to identify each section. If a developer decides to use a sectioning element, a heading should be the first content item to act as a label.

Developers should also use landmarks to organize page content. Many screen readers will navigate a web page using landmarks. Landmarks such as complementaries, navigations and regions should have ARIA labels.

Common heading factors

  • The document title should always be an <h1>.

  • It is normal to use headings for repeated blocks of information that occur before the document title such as menus or sidebars.

  • For single page applications, browser focus should be set on the <h1> heading after a new view is loaded.

  • Headings should not be used as subheadings, subtitles, alternative titles, taglines or slogans. In these situations, use a <p> tag.

Outlook Business Solutions can work with web development teams to help them understand the importance of accessibility and how it is incorporated into a digital property from the start. Our new subscription program, Ally Support, allows you to add accessibility expertise to your team without adding full-time staff. Contact us today to learn more.