10 Ways to Improve Your Site's Accessibility

HTML Headings

Heading levels (h1-h6) enable users to navigate quickly through your site content, identifying relevant content areas.  Improperly nested headings can leave some users confused and unable to locate key content within your document. Use headings to provide meaningful structure and information hierarchy to your content.

Barrier alert

It's possible for your heading structure to be fully standards-compliant, but provide no accessibility benefit to the user. Headings should not only be nested (1, 2, 3), but they should form a meaningful information hierarchy. A parent heading should be relevant to each of its children, and child headings should bear some relation to the parent.

Tips on using headings

  • Each page should begin with an <h1> tag
  • Top-level landmarks should all begin with an <h2> tag
  • Apply page and topic headings in a nested outline structure; do not skip levels
  • Do not use headings for stylistic or visual purposes; instead, use CSS to stylize headings in context
  • Nested headings should have some relevance to their parent headings
  • Assess your page headings using a utility such as the AInspector Sidebar, WAVE, or the Web Developer Toolbar