ADA Compliance: Headings

Adding – or changing – headings (aka titles) on your website can effect whether your website is ADA compliant or not.

It’s easy to throw in a header where you want to emphasize text, or to select a header that looks right size to fit in with the rest of the page. However it is very important that headings are used only as headers and that they are used in the correct order to create a proper page structure. Headings should be used to define the section that follows. A disabled person may read (or have read to them) only the titles and based on the title they can decide whether to read the text that follows.

On websites headings come in six sizes (1 through 6) and you might see them referred to as h1, h2, h3, h4, h5, h6. H1 is the biggest, h6 the smallest. There should one and only be one h1 used on each web page – think of it as your page title.

The only header that can be used after an h1 is an h2. It does not have to be immediately after the h1 but there should not be any other headings in between. Think of h2 headings as defining the major sections of your page.

Headings must be used sequentially when going downwards, but you can jump upwards, or repeat a heading (except h1) at any time. As an example, you may have two h2 headings for the two main sections on your page. The first may have a sub-section for which we would use an h3. So our heading structure would be h1 – h2 – h3 – h2.

Here are some more examples of acceptable heading structures:
h1 – h2 – h2 – h3 – h4 – h5 – h2 – h3
h1 – h2 – h3 – h2 – h3 – h2 – h2 – h2
h1 – h2 – h3 – h4 – h4

Here are some heading structures that would not be acceptable:
h1 – h2 – h3 – h1 – h2 – h3
h1- h2 – h4 – h5
h2 – h3 – h4 – h5