Headings seem so 1994. When I was first learning HTML, I remember using the <h1> tag when I wanted text to appear large, <h6> when I wanted it tiny and when I wanted it somewhere in between then I'd use <h2> - <h5>. But, as anyone interested in accessibility know, it turns out that these tags have an important semantic use - to organize content into an outline to make pages easier to navigate. This is particularly important for users navigating with a screen reader for whom the content might not have been designed. For this group, it is vital to provide some sort of outline so they don't have to read through content from top to bottom.
But just using headings isn't enough. As mentioned, they are valuable because of the semantic structure they lend to otherwise unstructured content. You need to make sure the semantic meaning you convey with your headings is correct. To understand the best practice of headings, it's useful to think about how a screen reader user might use them to assist in navigating a page. Both Window Eyes and JAWS offer similar commands to navigate through headings on web pages (see the JAWS web shortcuts and Window Eyes shortcuts). Users have the option press 'h' to jump to the next heading of any level on the page or can select headings of particular levels by pressing '1' through '6' (in Window Eyes this must be followed by the 'h' key). Additional functionality allows users to jump to the first heading. It can seem like this wouldn't be a huge benefit to users, but without structural notation like headings, a web page seems like a huge blob of text. Users can skip around in this text, but headings provide a way for web developers to logically specify the skips that make the most sense.
User studies by Watanabe et al. have demonstrated the effectiveness of using heading elements and the anecdotal of blind users we know support this. There is absolutely no reason not to add these!
These rules serve only to enforce that the web page looks like an outline.
So, what's the proper way to put headings on a page? As mentioned, in 1994 I chose heading levels based on the size of the font that I wanted to produce. Fortunately, with the arrival of CSS, we can choose the heading level that actually makes sense, regardless of its size, and then size it to fit with our desired visual style. Below are a couple of examples of how to override the default style of a heading element with CSS:
But just using headings isn't enough. As mentioned, they are valuable because of the semantic structure they lend to otherwise unstructured content. You need to make sure the semantic meaning you convey with your headings is correct. To understand the best practice of headings, it's useful to think about how a screen reader user might use them to assist in navigating a page. Both Window Eyes and JAWS offer similar commands to navigate through headings on web pages (see the JAWS web shortcuts and Window Eyes shortcuts). Users have the option press 'h' to jump to the next heading of any level on the page or can select headings of particular levels by pressing '1' through '6' (in Window Eyes this must be followed by the 'h' key). Additional functionality allows users to jump to the first heading. It can seem like this wouldn't be a huge benefit to users, but without structural notation like headings, a web page seems like a huge blob of text. Users can skip around in this text, but headings provide a way for web developers to logically specify the skips that make the most sense.
User studies by Watanabe et al. have demonstrated the effectiveness of using heading elements and the anecdotal of blind users we know support this. There is absolutely no reason not to add these!
Heading Guidelines
The first rule is that no heading tag except <h1> should be added until the larger sized tag has been added. For example, no <h3> before <h2> and no <h2> before <h1>. The second rule is that there should be only one <h1> per page. Finally, only a heading with a level <= n+1 may be the level of the heading that immediately follows a heading with level n. This means that after a <h3> may come an <h2>, <h3>, or <h4>. A <h1> would be allowed, but only one is allowed per page.These rules serve only to enforce that the web page looks like an outline.
Making Them Look Like You Want
So, what's the proper way to put headings on a page? As mentioned, in 1994 I chose heading levels based on the size of the font that I wanted to produce. Fortunately, with the arrival of CSS, we can choose the heading level that actually makes sense, regardless of its size, and then size it to fit with our desired visual style. Below are a couple of examples of how to override the default style of a heading element with CSS:
Non-block level display
This makes headings appear as inline elements, meaning there won't be a new line after each one.
<h2 style="display: inline">My Heading</h2>
Changing Size
By default, the heading level changes the look of the font in the heading, such as the size or weight. These can be changed easily.
<h2 style="font-size: 1em">My Heading</h2>
Post a comment