Techniques

Use accurate, semantic HTML

  • Where possible, ensure that everything that looks like a heading is coded as a heading in native HTML. The same applies to buttons, links inputs, and any other element that can be represented by native HTML. Native HTML elements work ‘out of the box’.
  • ARIA role assignments may be used in cases where this is not possible, for example, for custom elements or in legacy code. Unlike native HTML elements, custom widgets with assigned roles also need additional code to determine their behaviour and make them accessible, for example, to receive focus and to be activated by pressing enter/return.

HTML5 sectioning elements provide ARIA landmarks for key elements

HTML5 introduced sectioning elements that provide ARIA landmarks by default, allowing their semantics to be conveyed without specifying an ARIA role.

Table 1 – HTML5 sectioning elements and their default ARIA landmark roles

HTML5 elementDefault ARIA landmark role
mainmain
navnavigation
asidecomplimentary
headerbanner (when used as a top-level element)
footercontentinfo (when used as a top-level element)

Provide both HTML elements and ARIA landmarks for key navigational elements

The most robust approach is to use both HTML5 elements and ARIA landmarks on navigational elements, to ensure compatibility with all assistive technology.

Use aria-label/aria-labelledby to add further meaning to landmarks

Label landmarks to provide extra meaning to their contents. This can be particularly useful if you have more than one landmark of the same type.

Provide heading elements at the beginning of each section of content

Make sure you use sub-level headings (h2-h6) as appropriate, to denote content blocks that come under landmark sections.

Code example

  • <header role="banner">
    • <div>Company logo</div>
  • </header>
  • <nav role="navigation" aria-label="Main menu">
    • <ul>
      • <li>Main website navigation</li>
    • </ul>
  • </nav>
  • <main role="main">
    • <div>Main page content goes here</div>
  • </main>
  • <nav role="navigation" aria-label="In this section">
    • <ul>
      • <li>Section navigation</li>
    • </ul>
  • </nav>
  • <footer role="contentinfo">
    • <div>Privacy statement, copyright</div>
  • </footer>

Note the use of aria-label to differentiate the two navigation elements.

Examples of good practice

Videos

References

WCAG 2.1

EN 301 549 v 2.1.2

  • 9.1.3.1 Info and Relationships
  • 9.2.4.1 Bypass Blocks

Further reading