Skip to content
Home

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 FieldBlock 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.
  • Use the SkipContent helper to let the user skip large parts of content, while using keyboard navigation.
  • 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.

Viewport

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

<meta
  name="viewport"
  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.):

<body>
  <header>Header</header>
  <nav>Main navigation landmark</nav>


  <main>


    <section aria-label="I need a label to be a region landmark">
      <h1 class="dnb-h--large">h1 styled as h2</h1>
      <p class="dnb-o">text</p>
    </section>


    <article aria-labelledby="article-1">
      <h2 id="article-1" class="dnb-h--xx-large">h2 styled as h1</h2>
      <h3 class="dnb-h--medium">h3</h2>
      <h4 class="dnb-h--basis">h4</h2>
      ...
    </article>


    <article aria-labelledby="article-2">
      <header>I'm not a landmark anymore, because I'm inside article</header>
      <h2 id="article-2" class="dnb-h--large">Another article h2</h2>
      ...
      <footer>I'm not a landmark anymore, because I'm inside article</footer>
    </article>


  </main>


  <aside>Aside the main landmark</aside>


  <footer>Footer landmark</footer>
</body>

Read more about HTML landmarks and sectioning elements.

Practical Support of ARIA labels

You may be interested to read more about aria labels in the Screen readers section.