DEV 1.10 – Provide native HTML 5 for elements and ARIA for landmarks
Why is this important?
Native HTML tags (for example, headings and links) are used to identify the purpose of different elements on the page and navigate between them easily. The Web Accessibility Initiative's Accessible Rich Internet Applications (ARIA) framework provides a more extensive vocabulary for developers through the use of 'landmarks' that describe the purpose of elements on the page.
Both HTML elements and ARIA landmarks allow a developer to define, for example, where the navigation bar is on the page, or where the main content of the page starts. With these defined, assistive technologies are able to communicate the purpose of the sections to the users, and users may use navigational aids to move directly to those areas of the page.
Best practice is to use both HTML elements and ARIA landmarks to define elements.
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 element | Default ARIA landmark role |
main | main |
nav | navigation |
aside | complimentary |
header | banner (when used as a top-level element) |
footer | contentinfo (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