The stylesheet includes two helper classes for screenreaders;
.screenreaderwill 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--focusableallows non focussable elements to be focusable for screenreaders.
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.
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.
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.
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 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.
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;