Headings are vitally important when assisting in scanning and navigating your web page (see SSB Bart Group’s simulation of Web Headings for Screen Readers). They also help with search engine optimization (SEO), letting search engines know what topics your web page contains.

Headings do not stand alone; they introduce subject matter. Headings should not be used to make paragraphs stand out, as that makes the content unscannable by your constituents. They should be no longer than 140 characters.

Proper Semantic Usage

• Heading 1 (level 1 in heading hierarchy): A level 1 heading (the <h1> HTML tag) should be available somewhere at the top of your document. It typically defines the page’s primary topic.
• Heading 2 (level 2 in heading hierarchy): A level 2 heading (the <h2> HTML tag) must come after an <h1>. It can be in an aside section or further down on the document, depending on how you organize your content on your document. You can have multiple Heading 2’s as long as each one appropriately introduces a topic.
• Heading 3 – 6 (levels 3 – 6 in heading hierarchy): Level 3 through 6 headings (the <h3>, <h4>, <h5> and <h6> HTML tags) come after the previous levels ordinally. Again, you can have multiple headings of these different levels, but they must be relevantly and ordinally placed. Do not go out of order.

Improper Usage

While it seems unavoidable when copying and pasting from various word processors and email clients, you will need to correct the semantics if you are placing the content on web documents.

The most common occurrence comes from bolded paragraphs. Word processors allow you to style and bold paragraphs to look like headings, but they are not semantically defined as headings when pasted into web documents. You must remove all the styling and bolding on the paragraph, and change the paragraph to one of the heading levels.

References

Guides and How-To’s

• Usability.gov’s Web Standards and Usability Guidelines
  • Chapter 3: Accessibility
  • Chapter 9: Headings, Titles, and Labels
  • Chapter 11: Text Appearance
• Web Accessibility Initiative (WAI)
  • Tutorials
    • Headings
    • Content Structure
  • Designing and Developing 
    • Provide informative, unique page titles
    • Use headings to convey meaning and structure
    • Provide clear instructions
    • Keep content clear and concise
    • Use headings and spacing to group related content
    • Create designs for different viewport sizes
    • Use mark-up to convey meaning and structure
• Web AIM
  • Semantic Structure – Using Headings for Content Structure
  • Semantic Structure – Using Headings Correctly
  • Designing for Screen Reader Compatibility

Guidelines

• WCAG 2.0 Guideline 1.3 – Adaptable
• Understanding WCAG 2.0 Guideline 1.3
  • 1.3.1 Info and Relationships Level A
  • 1.3.2 Meaningful Sequence Level A
• WCAG 2.0 Guideline 2.4 – Navigable
• Understanding WCAG 2.0 Guideline 2.4
  • 2.4.6 Headings and Labels Level AA
  • 2.4.10 Section Headings Level AAA
• Techniques for WCAG 2.0 G115: Using semantic elements to mark up structure
  • H42: Using h1-h6 to identify headings

Simulations

• User Simulation: Through Eyes of a Screen Reader
• LevelAccess
  • Simulation: ZoomText Demo
  • Simulation: Screen Magnification & Reflow in Acrobat Reader (also example of horizontal scrolling issues)
  • Simulation: Screen Reader Language Support
  • Simulation: Web Headings for Screen Readers
  • Simulation: Readability
• User Simulation: Carly’s Café – Experience Autism Through Carly’s Eyes
• The National Autistic Society Simulation: Autism and sensory sensitivity