Web Accessibility Best Practices

Campus Information Technologies and Educational Services (CITES) and Disability Resources and Educational Services (DRES)

University of Illinois at Urbana/Champaign

Headings

Summary

Visual styling of text and layout is used in graphical designs to make it easier for users to identify groups of information in web resources and to identify headings and sub-headings of structured documents. For people using speech and text technologies like refreshable Braille displays, the groupings and structure also need to be represented in markup using html headings (h2-h6).

Benefits to People with Disabilities

  1. Many types of browsers and assitive technologies allow people to navigate web content using headeers

Other Benefits

Related Accessibility Requirements

Section 508
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
Web Content Accessibility Guidelines (WCAG 1.0)
3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]

HTML Markup Details

h1
Use h1 as a unique title for a web resource
There should be only one h1 on a web resource
h2-h6
Use h2-h6 elements as sub-headings to identify major and minor sections
Use headings in numerical order; for example, h3 should be used under h2 and h4 should be used under h3

Example Code


<body>
...

<h1>Document title</h1>

  <h2>Section 1 title</h2>

    <h3>Sub-section 1.A title</h3>

      <p>Section content ...</p>


    <h3>Sub-section 1.B title</h3>

      <p>Section content ...</p>


    <h3>Sub-section 1.C title</h3>

      <p>Section content ...</p>


  <h2>Section 2 title</h2>

    <h3>Sub-section 2.A title</h3>

      <p>Section content ...</p>


    <h3>Sub-section 2.B title</h3>

      <p>Section content ...</p>


</body>