Making Accessible Websites for the United Nations

Textual Content

Titles

WAI Definition (Checkpoint 3.5 and 12.3)

Use header elements to convey document structure and use them according to specification.

Divide large blocks of information into more manageable groups where natural and appropriate.

Explanation

Documents are often divided into a variety of sections; those sections should be introduced with the HTML heading elements (<h1> through <h6>).

It is important to use headings appropriately to convey document structure. For example, an <h2> is the subtitle of an <h1>; a <h3> is the subtitle of an <h2>, etc.

Content developers should not skip levels (e.g., <h1> directly to <h3>).

They should not use headings to create formatting effects (use CSS style sheets to change font styles instead).

Rationale

Categorizing the information makes it easier for the average user to visually scan the content. Large blocks of information are not very reader-friendly and therefore all attempts should be made to break the information down into smaller sections, where possible.

Furthermore, breaking up the text into smaller sections and sub-sections allows screen-reader users to scan the page. Screen readers can bounce from title to title, enabling the user to skim through the information rather than having to go through all of the content word by word.

Some screen readers will read content marked as a header in a tone of voice different from the one used for other content on the page, providing users with important clues about the document structure. It is therefore important to use heading tags according to specification to give visually-impaired users a better understanding of the structure of a document or page. Misusing heading attributes would misinform and confuse screen-reader users.

Technique

The following HTML markup shows how heading tags may be used to properly render the structure of a document:

Example

<body>
<div class="section2">
  <h1>Welcome to the United Nations!</h1>
  … some text here ...
</div>
<div class="section2">
  <h2>sub topic 1</h2>
  ... text of the section ...
</div>
<div class="section3">
  <h2>sub topic 2</h2>
  ... text of the section ...
</div>
</body>

Validation

Test

Using the Firefox Web Developer's Toolbar (plugin):
Go to Outline > Headings.

Note

Make sure the option "Show element name when outlining" is checked (in the Outline menu).

Success Criteria

The page should have titles and subtitles.

All titles should be outlined and the hierarchy between heading tags should be consistent with the hierarchy of the content.