For more than one million blind Americans, navigating a website using keyboard commands is a common, quick way to learn about the layout of a website. When a website is organized into headings, it becomes easier to pick critical points or skim for relevant information. Proper use of headings helps a website be more organized, benefits users of all abilities, and enhances your SEO.
Headings, when constructed well, serve as a guide to a website. Like in an outline for a paper, headings should be used to organize the parts of a website into related groups, not to lend a decorative feel to your webpage. Using headings for decoration instead of functionality can confuse blind users using keyboard shortcuts to navigate a site with headings. So what's the "right" accessible way to use headings?
Let's start with how to organize headings. Headings can be divided into six levels. Heading level one should be a title or central point of a specific text. The more minor headings that follow should be related content and subsections of the main section. The next main point or section of text can easily distinguish from the rest. This is a simple and easy way to help all users pick out relevant information or know which areas will have what content.
When using headings to label regions on a website, it's best to have the first (largest) heading indicate the title or navigation menu. All subsequent headings can be smaller as you move further along the webpage. However, if the headings are part of a sidebar or other element that stays stagnant across web pages, they should not change. Consistency would be more important in this instance.
When organizing headings for written content, such as an article, headings can be used to manage the text into relevant categories. For example, H1 could be the title, and h2 is used for any section titles that follow. The subsequent headings can group related content beneath the section title. The important thing is that the headers remain consistent.
Heading titles should be concise, describing the section to follow. This makes it easier for search engines to understand and index the webpage.
While there is no requirement for how long a heading is, shorter is often better. It puts less stress on the eyes or ears of the person scanning the site's content. Heading titles should also not be in all caps. When capitalized, the letters lose their distinctive shape and challenge dyslexic users.
Heading level 1 does not have to be the first heading on the page. Often you'll find smaller, navigation-related headers before the main heading, mainly if it signifies the title of a piece. However, wherever heading level 1 is placed, it should always indicate the most important/relevant text aspect, such as the website or article title.
It is also best to limit your webpage to one heading level 1 per page. (You may have the website title at h1, the article title at h2, and all subsequent headings at h2 or below.)
Paragraphs and quotes should not be headings. And while great for navigation, be careful not to overuse headings, as they can clutter a website instead of neatly organizing it.
How do you know if you are on track? An automated tool can tell you if you have duplicate headings or more than one H1, but these tools are just the first step.
You want to ensure your heading title makes sense with the rest of the text, and that you're letting the reader know what to expect next. User testing is valuable here. A member of the disability community. You can quickly and objectively tell you if your headings help or hurt their experience on your website. User testing is an essential part of your accessibility initiative.
For more information on building an accessibility testing program, check out our ultimate guide to accessibility testing.
Organizing by heading can be an excellent tool for a disabled user navigating with a screen-reader and an able-body user looking for specific information. The headings should be used to group information by relevance and importance, with the most prominent headings consistently used for titles or key topics. As the headings grow smaller, the information they represent should also decrease in relevance.
How do your headings look? Get started by scanning a page of your website with UsableNet AQA. Our free automated testing tool will review your site for accessibility issues and provide recommended fixes. Try it now for free.