Skip to content

Accessibility Checklist

  • Follow semantics properly, use landmarks (landmark and semantic example).
  • Ensure correct heading levels.
  • Use different screen readers and test regularly.
  • Make sure, everything is responsive - use mostly the rem unit.
  • Make everything accessible for keyboard navigation only and handle focus management properly.
  • Group form elements inside <fieldset /> and <legend />. The FormRow is doing this by default.
  • Do never expose a form element as disabled to the user. Use good UX instead.
  • Have a Skip Link in place if the user has to tab many times to reach the main content.
  • Make good use of aria-label and aria-hidden, e.g. of decorative content.
  • Make images and illustrations accessible.
  • Have aria-live in place for dynamic content, like updates coming from the server.
  • Hide invisible content with display: none; or with the hidden attribute, or remove the markup entirely (with React States).
  • Properly use the for="#id" attribute on labels. Every form component is supporting internal label usage, like <Input label="Input label:" />.
  • Allow viewport zooming in web pages. Example below.


Allow zooming in web pages, especially important on touch and mobile devices.

content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=yes"

Landmark- and semantics example

Example usage of HTML5 landmarks (e.g. <nav> or <section> etc.):

<nav>Main navigation</nav>
<section aria-label="I'm now a region">
<h1 class="dnb-h--large">h1 styled as h2</h1>
<p class="dnb-o">text</p>
<h2 class="dnb-h--xx-large">h2 styled as h1</h2>
<h3 class="dnb-h--medium">h3</h2>
<h4 class="dnb-h--basis">h4</h2>
<header>I'm not a landmark anymore, because I'm inside article</header>
<h2 class="dnb-h--large">Another article h2</h2>
<footer>I'm not a landmark anymore, because I'm inside article</footer>
<aside>Aside the main landmark</aside>

Read more about HTML landmarks and sectioning elements.

Practical Support of ARIA labels

ARIA labels like aria-label, aria-labelledby and aria-describedby will mostly work on interactive HTML elements, and not on elements such as div, span, p or ul.

Read more about label-support in the w3 docs.