Learn how to make your page titles and headlines ADA compliant. Doing so will allow people using assistive devices to more adeptly navigate your content.
Key Takeaways
- Headings are used to organize text into logical sections
- Don’t use headings to bring attention to text (use bold or italics)
- In content, start with heading 2, use heading 3 only if heading 2 section needs sub-sections.
The Basics of Titles and Headlines
Assistive devices, like screen readers, use titles and headlines to quickly navigate page content. For this reason, titles and headlines should never be used to bring attention to text. Instead, they should only be used to separate content into logical sections.
There are six heading levels, and they’re tiered according to importance.
- Heading 1 (h1) – This is the page title. The title is the only place where a heading 1 should be used.
- Heading 2 (h2) – The default heading size for your page’s content. This is a top-level heading.
- Heading 3 (h3) – Only used to identify a sub-section under a heading 2.
The following heading sizes are far less common, and typically only used in longer editorial pieces or for more technical content.
- Heading 4 (h4) – Only used if dividing a heading 3’s content into sub-sections.
- Heading 5 (h5) – Only used if dividing a heading 4’s content into sub-sections.
- Heading 6 (h6) – Only used if dividing a heading 5’s content into sub-sections.
Why This Matters for ADA Compliance
If someone with a visual impairment is using an assistive device and wants to quickly navigate to content at the bottom of a longer website, they can skip by heading 2s. Once they hear a heading 2 that interests them, they can then drill into that content, and have the heading 3 headers read to them, and so on.
Remember that h3 level headings divide the content of a heading 2 into sub-sections, which means someone using a screen reader will not have those heading 3s read to them unless they first choose to access the content of the higher-level heading 2 above it.
If headings are used to visually bring attention to text, it breaks the logical flow of information and subverts the purpose of headers.
A Few Small Details
Please do not change the font size. The spacing around the different level of headers is based on a pre-set font-size and what lies around it, like a paragraph or an image. These spacings are automatically calculated to be ADA compliant. When you adjust the font-size, it will break the spacing percentages
Please do not change the font color. Text has to have a specific color-contrast ratio based on its size, type, usage, and immediate surroundings. It also has to take into consideration color-blindness. Using The default font-colors will make sure the contrast-ratio is maintained.