Skip to main content

Keyboard Accessibility

Ensure keyboard accessibility​

We need to ensure that all areas of the site are navigable via keyboard, this mainly focusses on the ability to tab through all links and being able to open and close drawers/modals/dropdowns using Space (simulates click) and Escape (to close)

Key areas to focus on​

When tabbing through the site you should be able to access all the navigation links. On all new build there should be a hidden arrow that displays when tabbing and pressing Space on this should open the dropdown menu allowing access to that. Pressing Esc will close the menu and allow you to continue tabbing through the site.

Don't use divs for clickable elements​

By default a div wouldn't be tabbed to and so keyboard navigating would skip it, so whenever making a trigger element for anything always ensure you use either an anchor or button element.

Logical steps​

Ensure the tabbing goes in a logical order to what is happening on the screen, for example if you have a search box in the header, then when typing in this you should be able to tab directly into the search results, but if the results element is built further down the page you may have to tab through the rest of the navigation to get there.

Drawers/modals​

Ensure these use the dialog element, this means the user is encapsulated in the element when it opens, pressing Esc should close these and take you back to where you were on the page to continue tabbing.

If you use Faux links as well as buttons on a CTA card, set the faux link to be aria-hidden="true" and tabindex="-1" so when tabbing as well as using screen readers the user will only focus on the button rather than have to jump through the same link twice.

Focus Indicator​

Ensure when tabbing through the site that all elements you focus/can interactive with have the standard indicator visible so the user knows where they are on the page.

The Skip to main content button should be the first element that you can tab to on a page, it should only display when focussed on.

<a class="util-SkipToContent" href="#MainContent">
  {{ 'accessibility.skip_to_text' | t }}
</a>