Overview
Use semantic markup (headings, lists, etc.) to properly represent the structure of the document. All elements should have complete start and end tags, be nested according to their specifications, not contain duplicate attributes. In addition, any IDs are unique, except where the specifications allow these features.
Headings
- Think of headings as the outline to your document. <h1> is the primary headline with each heading level falling beneath that. Use headings to delineate sections of your document, not just to make larger text.
- Assistive technology uses headings for navigation within a page and to quickly skip to topic headings on a page. JAWS, for example, will bring up a listing of all headings on a page.
- Use h1, h2, h3, h4, h5 and h6 for headings . Example:
<h1>Primary Topic</h1>
<p> text</p>
<h2>Subsidiary Topic</h2>
<p>Text relating to subsidiary topic</p>
There is no unanimous agreement on whether or not there can be more than one H1 tag per page. Some feel that the H1 should represent the most important element on the page. Others feel that a page may have multiple H1 instances if the content requires it.
Lists
Lists convey a hierarchical content structure. Lists should never be used to control indentation or layout. List types should be used properly: <ul> should be used for lists with no order; <ol> for ordered lists; and <dl> for definition lists. If you don’t want to see bullets displayed use style sheets to control the appearance of lists.
Class Example
Class Example (Before, Problems, After)
WCAG 2.0 Guidelines
1.3 Info and Relationships: Create content that can be presented in different ways (for example spoken aloud, simpler layout, etc.) without losing information or structure.
2.4.10 Section Headings: Where content is organized into sections, the sections are indicated with headings.
Suggested Tools to check Headings
- IE Web Accessibility Toolbar: Use the Structure tools to check Headings Structure. Make sure the headings include at least one Level 1 heading and that the other headings are nested properly.
- Use Jim Thatcher’s Favelets -> Headings
- Web Developer Toolbar for Firefox: Go to the Outline menu and select Outline Custom Elements. Enter H1 – H3 or however many headings you might expect.
- JAWS has a Headings mode that allows users to quickly skip to headings.
- WAVE – Go to Outline