What we mean when we talk about accessibility
Before we get onto the tips, if you’re not familiar with why software accessibility is important, have a read of this short blog post from the head of accessibility at the Government Digital Service.
“When I talk about accessibility, I’m using it to mean that people are not excluded from using something on the basis of experiencing a disability. Accessibility means that people can do what they need to do in a similar amount of time and effort as someone that does not have a disability. It means that people are empowered, can be independent, and will not be frustrated by something that is poorly designed or implemented.”
What are the guidelines?
Our series will begin with a look at the Web Content Accessibility Guidelines (or WCAG), which are a global standard used to assess the accessibility of a web application. The guidelines are broken down into four principles, each of which contain a set of guidelines that each list a set of success criteria.
Success criteria are graded as level A, AA and AAA. Level A are the most fundamental and AAA the most niche and usually hardest to achieve. In the UK, all public sector websites/apps/intranets must meet all of the A and AA level criteria in the most recent edition (v2.1) of the guidelines.
Our tips here are not intended to be an exhaustive list of how to meet all the criteria in any use case, but pointers to how to avoid the most common pitfalls. At the end of the section you’ll find links to the full WCAG advice on meeting the criteria.
On to the tips!
The very first guideline is a biggie:
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
This helps people who have difficulty perceiving visual content. Assistive technology can read text aloud, present it visually, or convert it to braille.
Do
- Always use alt attributes on img elements
- The text must convey the same meaning as the image
- Set it to an empty string (i.e. alt=””) if the image is purely decorative and should be ignored
- Use aria-label or aria-labelledby attributes
- For any element needing a text alternative and isn’t an img
- Aria-label can be added directly to the element but if you already have an element with text that suitably describes the non-text content then aria-labelledby can be used to reference that instead, which is preferrable
- Use aria-describedby attribute
- If a short label alone is not adequate, aria-describedby can point to an element containing a longer description
- For img elements this is in addition to the short description of the alt attribute; for other types of element it can be in addition to an aria-label/labelledby
Don’t
- Use CSS to include images that convey important information – you’re unable to add alt text in this case
- Forget to have a text alternative that includes information that is conveyed by colour in your image/graphics
- Use text alternatives that are not valid alternatives, such as filenames of images, or generic placeholder text
If you’d like to find out more, take a look at Understanding Success Criterion 1.1.1: Non-text Content.
Designing for accessibility
The home office have been kind enough to put together some posters illustrating fundamental points to bear in mind when designing for users with particular needs. We’ll present them in a series in the coming newsletters. We begin with designing for users of screen readers.
