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.
  • Use the AriaLive component to automatically inform users using a screen reader, about changes on the screen that they didn't initiate.
  • 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.

Edit on GitHub