Creating content for the web that is accessible to all is something that should always be considered at the inception of the content. You should think about the user, and how they will primarily consume it. You should then think about alternative methods to consume it.
We call this “Read, Listen, Watch”. Where content is written, you should consider those that have difficulty reading and offer audio alternatives. Where content is audible, consider those that have difficulty listening, and offer a written alternative. And where content is visual, consider those that have physical difficulties and offer interaction-free alternatives.
Read
- Make titles informative, and ensure that they do not duplicate content.
- Use headings sequentially and be semantic to show the structure of your document.
- Where you use hyperlinks, make sure that they inform the user what they are clicking on. Avoid vague link text like “Click here”, or “Find out more”.
- Provide alt text for images that describe the purpose of the image. For images that serve no purpose other than decoration, you do not need to provide text alternatives.
- Forms require special attention. Make sure that you provide clear guidance for every field and make validation and error text clear on how to resolve the issue.
Listen
- Write captions for audio content and make them available easily. if you cannot do this, then ensure you provide the alternative in an easy to consume place. Remember this is about enabling everyone to consume your content, not just checking a box.
- There are benefits for everyone. Do not assume that your content can always be heard. if the user is in a noisy environment, captions can help them to consume your content without delay.
Watch
- Provide Audio Descriptions so that those who have difficulty interpreting visuals can understand the content of your media.
- Write captions for video content and make them available easily. if you cannot do this, then ensure you provide the alternative in an easy to consume place. Remember this is about enabling everyone to consume your content, not just checking a box.
- There are benefits for everyone. Do not assume that your content can always be heard. if the user is in a noisy environment, captions can help them to consume your content without delay.
- Sign language content additions can help to allow deaf users to understand your content.
Other considerations
- Consider contrast in colours.
- Ensure there is enough contrast between the colour of text in a button. The required contrast ratio is 3:1.
- This also applies to text over images, where it is much harder to test. Consider the use of overlays to help, or separating the text from an image entirely.
- Avoid design only cues.
- Using colour alone to convey meaning will be useless for those that are colourblind. Consider using multiple cues to show that action needs to be taken.
- Keep the user in the driving seat.
- Where you are conveying a message, always provide the user with controls, so that they can skip or rewind in case they need additional time.
- Use semantic markup.
- Your website should be made up of elements that can be understood by a human as easily as a screen reader.
- Don’t make your code do anything abnormal
- Don’t re-order your markup after the DOM has loaded.
- Use ARIA labels to show the meaning of interactive elements.
- Make sure your interface can be navigated only with a keyboard.