Headings in websites and documents are an important part of universal design for the web. This article will outline why people with a variety of disabilities find headings useful. In addition, the article will explain why headings need to be styled properly.
Headings in Websites and Documents
One principle of the Web Content Accessibility Guidelines (WCAG) requires that web content must be understandable. Headings help people understand what a webpage is about. Each webpage should have a title. Moreover, longer webpages with more than one section should have a heading for each section. Text divided into sections is often easier to read and understand than text in one (1) long section. Similarly, long documents and emails also benefit from headings. These headings tell readers what the content is about. For instance, readers may skim the headings of a page to decide whether it includes topics they need to read about.
Furthermore, another WCAG principle requires content to be perceivable. In other words, people with a variety of disabilities should be able to perceive the content of a webpage that is presented audibly or visually, including headings. Finally, WCAG requires websites to be robust, to work with current and future assistive technologies.
Many web content creators may try to design headings through changes to the formatting of their text. For example, content creators may change the text’s:
- Font
- Size
- Colour
- Bolding
These new formats change how the text looks. However, they do not change how the text appears to people who use screen readers, software programs that read text aloud.
In contrast, screen readers can identify headings that content creators have tagged or styled using a menu or another control. After content creators have styled a heading with the correct menu, they can still change its font or other formatting to make it visually appealing or distinctive.
When headings are properly formatted, people using screen readers can:
- Name all the headings on a page
- Navigate quickly between headings with keyboard commands
- Jump directly to any heading
Without this formatting, headings appear to screen readers like ordinary text. As a result, screen reader users cannot easily distinguish headings from the other text on a webpage. On the other hand, screen readers announce the word “heading” when they encounter a properly formatted heading. In addition, screen readers announce the level of each heading.
Heading Levels
Screen readers can recognize six (6) heading levels. For example, the title of a webpage should be a level 1 heading. Furthermore, each webpage should only have one (1) heading at level one (1). On the other hand, subtitles or sections of a webpage should have headings at level two (2). If these sections have subsections, those headings should be at level three (3). While screen readers do not announce subheadings, heading levels fulfill this function.
Properly styled headings provide valuable information for all people who read a website or a document.