A heading is a style element that affects the structure of the content. Organizing a page by headings assists users with the orientation of the content and design. Typically, headings visually appear larger and more distinct than other text. Using headings and ensuring they are visually apparent is helpful for persons with all disabilities.
If the underlying code for the headings of a page is correct, screen reader users can also benefit from headings. Screen reader users can navigate a page according to its headings, listen to a list of all headings, and skip to the desired heading to begin reading at that point. For example, screen reader users can use headings to ignore the repeated blocks of content like headers, menus, and sidebars.
This is just too complicated. Can you do document remediation for me? How do I get a quote?
Most everyone
Code example
The image below shares a few examples of formatting text differently. There is plain text on the left, and then the HTML is shown on the right. One example of text has no formatting, while the other is formatted as a heading and a list.
<p> Here's a paragraph. </p>Why should I care about headings?
WebAIM asked how screen reader users preferred to find information on lengthy web pages(Web). Almost 70% of respondents said they preferred to use headings on a page.
The Heading 1 is the most important idea on the page.
Skipping heading levels can be confusing
This heading is a heading level 2. The next heading that we should create would either be a heading 3 or an additional heading 2.
If we were to create a heading 3 it would need to relate to our Heading 2 of Do not skip heading levels.
Why should I not skip heading levels?
This is a heading level 3. We do not want to skip heading levels because it can be confusing for people who use technology to read the content. Additionally, it can make the content feel out of order if I would have jumped to a heading level 4 instead.
Visual formatting like using bold or color does not work for a person using a screen reader
This is a heading level 2. I am not using a heading level 1 because I have already used one, and it does not make sense to add another one. Bolding, underlining, and using color for emphasis can be difficult for people who are color blind or visually impaired. Additionally, this reliance on visual aspects does NOT translate to assistive technology.
Only use Heading 1 through Heading 6
Most of the Assistive Technologies will pull only the first 6 headings. Ensure your content fits within this structure. Do not overuse headings. In most cases, content editors will not need more than <h2> rank headings and the occasional <h3> rank. Only for exceptionally long or complex pages would <h5> and <h6> be necessary.
To summarize, here is a shortlist of the requirements for headings:
- <H1> is the most important idea on the page. Subsections should begin with <H2>
- Documents and pages should have at least one <H1>
- Do not skip heading levels
- Do not select heading levels based on appearance
- Do not use bold or another visual formatting instead of a heading
- Only use <H1> through <H6>
Ok, so How do I apply headings?
Applying headings completely depends on what environment you are in. For this example, we are going to use Microsoft Word. Built-in styles are combinations of formatting characteristics that you can apply to text to quickly change its appearance.
Benefits of using styles:
- Accessible
- Create a Table of Contents automatically
- Reduce time for document wide updates and changes
- Ability to use Outline View
How to apply heading styles from quick styles
- Select some text you would like to apply a style to
- On the Home ribbon under the Styles tab
- Select a style from the Quick Styles (the ones in the box)
How do I apply headings in a google document?
This video will introduce users how to apply headings in a google document.
How do I apply headings in a Microsoft Word Document?
This video will walk users through how to apply the heading style to a document in Microsoft word.