UX Design Tips


Use Headings to Improve Accessibility

Headings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections.

Use headings for:

  • The structure of page content
  • Sections and sub-sections of an article
  • Navigation menus
  • Breadcrumbs
  • Any other consistent sections that users may want to find or skip

A Few Simple Rules

Every page should have a <h1>
check_circle Without the <h1>, the user has no simple way to learn what the page is about.

Headings are for structure, not formatting
check_circle Headings should be used to divide content into meaningful sections, not to format text. Your <h2> styling may be italic and green, but that does not mean that any time you want italic green text you should make the text a <h2>. Rather, the headings (no matter what their styling looks like) should be used to designate content structure.

Hiding headings
check_circle Sometimes the role of a feature is perfectly clear to people who can see the page design, but difficult or impossible to discern if you can't see the design. When this happens, you might want to add a heading to label that feature but make the heading invisible.

  • The accessible way to make a heading invisible is to use CSS: class="element-invisible". The heading will not appear in the displayed page, but screen readers and other forms of assistive technology will recognize the heading and make it available to their users.
  • Don't use "display:none". Although this coding will make the heading invisible, it also makes the heading unavailable to assistive technology — so nobody will find it, regardless of how they try to access the content.

Supposing is good, but finding out is better

~Mark Twain
Newspaper classifieds