Skip to contentSkip to footer
Give feedbackv3.0.2

Accessibility

Helpers

The stylesheet includes two helper classes for screenreaders;

  • .screenreader will hide the element unless viewed by a screenreader. This is useful for situations where screenreader users may need more information than non-screenreader users.
  • .screenreader--focusable allows non focussable elements to be focusable for screenreaders.

Icons

Labels

Icons should always be used with word labels. There are rare exceptions to this, however it's important to always assume that a user doesn't know what an icon means on its own.

Symbols

The only exception to using icons without labels are accessibility symbols. This is because, for the people who need them, they're very widely recognised. They should still be used with label where possible.

  Wheelchair access
  Induction loop

Colours

Contrast

It's important that coloured content over a coloured background meets the 4.5:1 contrast ratio, as recommended by W3C.

Colour combinations can quickly and easily be tested on the WebAIM website.

Recognition

Not all colours appear the same to all colour blind people. This means that we can't always assume block colours will be recognised by every user, which is an issue when the colour conveys meaning.

An example of this is red callouts. The red is critical to the function of this callout, as it emphasises the importance of the content.

Button vs link

Links and buttons are not treated the same by all accessibility software. Because of this, it's important to use the correct one based on the situation.

As a general rule, buttons should be used for functional events (such as form events), while links should be used only for linking.

For example, to open a dialog you would use a button. Whereas to open a new tab, you'd use a link, as you'd be navigating to a new webpage.

Expandable navigations

Expandable navigations shouldn't appear above content on the page, but should instead push the content down. This prevents accessibility issues around accessing content that might appear beneath an open navigation.

Focus outline

Generally, outlines have been replaced with borders (with some exceptions). However, all focus states for all elements should use a 2px yellow border.

/* Remove outline */
outline: none;
border: 2px solid @heritage-yellow;
/* Improve outline */
outline: 2px solid @heritage-yellow;