Accessibility
Learn how to build accessible apps following best practices.
Principles
- Available, usable, understandable to all
- Simplicity - energy is getting more complex, let's keep it as simple as possible
- Use 'tried and tested' design patterns as a first resort
- Include participants with access needs in our usability testing
- Conduct regular technical accessibility audits on our products
- Adopt automated accessibility testing into our production pipelines
- Accessibility eclipses previously accepted ways of working
What does Accessibility mean?
- Making products available, usable and understandable to all
- Making sure that everyone has an equal experience when using a product
- Building for people with disabilities (visual, hearing, motor or cognitive)
- Not just restricted to disabilities (internet access, language, device use)
Guidelines
Language
- Use plain English. Don’t use jargon or idioms.
- Expand on uncommon acronyms the first time they are used.
Why?
Our users will have different levels of comprehension and the simpler the language is, the easier it will be to read. If English isn’t your native language then keeping words simpler will make it easier to translate (using either your own ability or by using software to translate pages).
Further reading and examples
- How people read - Government Digital Service (opens in new window)
- Tone of voice - Monzo (opens in new window)
- Keep content clear and concise (opens in new window)
Colour
- You can use colour to convey meaning, but it has to be accompanied by a symbol, emoji and/or text explaining the situation.
- Contrast between text and its background must be sufficient in all cases. Must pass Web Content and Accessibility Guidelines (WCAG) 2.1, 1.4.3 Contrast (Minimum) Level AA (opens in new window)
Why?
If you struggle to distinguish colours, then using only colour can make it difficult to complete tasks. Errors in forms being the most common case where red is used to suggest an error has occurred.
The colour ratios should help all users distinguish background and foreground colours, but again those who struggle to distinguish colours will be helped by the contract ratios specified in the WCAG 2.1 requirement.
Tools
- Stark - Figma plugin (opens in new window)
- WebAIM colour contrast checker (opens in new window)
- aXe - browser plugin (opens in new window)
Further reading and examples
- Don’t use color as the only visual means of conveying information (opens in new window)
- Accessible emoji (opens in new window)
Headings
- Headings should label ensuing sections of content. Statements and straplines are not headings.
- Use the correct heading levels, so that nested headings make sense.
- Use semantic heading elements rather than using styling alone.
- There should only be one heading of level 1 per page/screen.
Why?
Clear headings provide a mechanism for users to navigate your site. Assistive technology users, such as screen reader users, use headings as a way to navigate through a page or to comprehend a page quickly to work out if this page contains the information they are looking for. Providing headings also increases the readability of your site.
Further reading and examples
- Web Accessibility Tutorial - Headings (opens in new window)
- Heading structures are tables of contents (opens in new window)
Links
- Don't use the word link.
- Make links readable out of context.
Why?
Assistive Technology (AT) will read out an element as a link if the right element has been used so there’s no need to use the word link. ATs usually have a mechanism for listing out all links in a document so it’s helpful to be able to read links out of context.
Users who access your site through a screen reader may search your page for its links and even navigate a page by its links. Having links that make sense by themselves will increase the ability to navigate your page.
Further reading and examples
Images
- Make sure all images have appropriate alternative text.
- Decorative images should have no alternative text.
- Avoid using images of text where possible (this does not apply to logos).
Why?
Not all users will be able to see images for a number of reasons; they might have a visual impairment, not be able to distinguish colours easily or the image may not download correctly. Providing a description of the what the image is ensures that all your users have an equal experience.
Further reading and examples
Input
Check out our Input usage guidlines for an in-depth look at these.