Accessible Headings

Many users use headings to visually skim through a web page. They usually give (and should give) a brief summary of the more detailed content below them. If you are sighted, you can find the headings in the image of the newspaper below quite easily:

The front page of the Toronto Star Newspaper. Note that the headings are significantly bigger and have a different typographic treatment than the body copy underneath it. Because of these features, sighted users can skim through these headings very quickly.

Screen reader users also use headings to skim through a web page quickly, and are used by screen-reader users as a table of contents. For example, using NVDA, this is done via the Elements List, and for Voiceover, this is done via The Rotor. The following video shows how screen reader users use these tools.

Insert video here

HTML5 Headings

This is the best solution to use, especially when building from scratch.

Most developers are familiar HTML5 heading tags (<h1> to <h6>) Note that lower heading levels (e.g. h1) don't necessarily have to be visually larger than higher ones (e.g. H4), bit it is a common convention. The following are HTML headings. The styling was originally derived from Heading Set Styling with CSS by Kitty Giraudel

This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is an h6

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞

ARIA Headings

You can fix existing markup this way, but really, why not just change the markup to the HTML5 ones?

The following are ARIA headings. Note that ARIA supports heading levels 1-10.

Besides The First Rule of ARIA, you should use real HTML5 headings since they affect how a web pages is indexed by search engines.

This in an ARIA heading level 1

This in an ARIA heading level 2

This in an ARIA heading level 3

This in an ARIA heading level 4

This in an ARIA heading level 5

This in an ARIA heading level 6

This in an ARIA heading level 7 (there is no HTML5 equivalent)

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

Wrap text

☜ Scroll to read full source ☞