All our web pages should be accessible to any user, regardless of their level of technical knowledge, their device, or their ability.

Browser support

The pattern library works on all current browsers (e.g. Chrome, Firefox, Safari latest, IE11 and Edge). Internet Explorer is supported back to version 8, although this is constantly under review and may change if IE8 usage drops to a negligible amount.

Every page should have a 'Skip to content link', as the first thing in the code. The markup is as follows:

<a href="#Main-Content" class="o-skip-link is-invisible">Skip to content</a>

The link is invisible without making it hidden to screen readers. When the link is focussed it appears on the screen, allowing sighted readers to use it to navigate.

Obviously, the element with id="Main-Content" should be the main part of the page, after the header and navigation (and subnavigation, if present).

ARIA roles

Tabs, accordions and buttons are already using ARIA roles to describe their purpose to screen readers.

When developing new components, check the Accessibility Project to see if there is a simple ARIA role you can assign to it. Remember that ARIA roles may need to be updated by Javascript when objects are changed.