Avoid using headings for formatting effects
no. 003
Make sure header elements are not only used for bold or emphasis
While heading elements such as H1, H2 and H3 display boldfaced or emphasized text by default, they should not be used simply to create formatting effects. Headings should convey structure: every time a heading element is used, its content becomes part of the document outline. Whenever a heading is used for formatting effects, that content becomes part of the document outline, hurting the logical structure of the document for assistive technology users who rely on that outline to understand what the document is about.
To do this, simply make sure that every time content needs to be made bold or emphasized, other techniques such as using the STRONG element or better yet, the font-weight CSS property are used instead. Assistive technologies such as screen readers will then avoid conveying misleading information about the document outline to the end users.
User Story
Simple Code Example
<h1>Used for 1st level heading, not random text</h1>
Testing Methodology
Using the Web Developer Toolbar for Firefox, select the “Outline Headings” test under “Outline” and make sure all headings shown really serve a headings purpose.
Specification Details
- WCAG 2.0: Level A
- Principle: Perceivable
- Guideline: 1.3 Adaptable
- Success [...]