Best Practices for Web Accessibility
Focusing on web accessibility allows people who experience disabilities to access the web more equally. We are constantly learning and implementing new techniques to ensure accessibility is at the forefront of our work.
We like to think of four main pillars that help us to achieve accessible designs: colour, content flow, media and structure.
Colour
- Choose colours that provide distinction for different levels of colour blindness
- Use an online colorblindness tester like Stark, or Coblis
- Ensure adequate contrast between text and background colours
- Contrast ratio of 4.5:1 for standard text, 3:1 for large text and graphics like icons
- Use dark overlays when displaying text over images or videos
- Use an online contrast checker like WebAIM
- Use colour + underlines for links instead of relying on colour alone
- Indicate button hover effects through size changes or movement
Content Flow
- Keep text meaningful and as concise as possible
- Left align text when using more than two sentences
- Use all-caps only when grammatically accepted
- Use simple and easy-to-understand layouts consistently
- Use a logical flow of type hierarchy: H3 flows under H2, H2 flows under H1
- Each and every page must have only one H1 heading
- Use a minimum text size of 16px
- Secondary navigation (such as jump to links, or on page anchor links) helps people understand on-page content
- Where appropriate, display content using multiple formats such as text, lists, videos and images
- Labels for buttons and links should be as clear and specific as possible as to the destination. For example “See How It Works” instead of just “More”
Media
- If displaying a video, make sure to use closed captions
- Transcripts can make videos and audio even more accessible
- Resize and optimize images
- Avoid embedding text into images
- Make sure to add up to 30 words of alternative text (alt) to all images, icons and graphics that need description
- Decorative images don’t need description but they still need an empty “alt” value
Structure
- Consider your audience to develop content that meets their needs on the devices they use
- Consider using videos or images more sparingly for audiences who rely on lower internet speeds
- Consider if people rely on data instead of home internet
- Ensure your website is AODA compliant and responsive across most important devices and browsers
- Ensure media and videos are optimized for low bandwidths
- Make sure your menu can be navigated using a keyboard
- Make sure buttons and calls to are all focus selectable using the keyboard
- Display links to key or essential pages in the footer
- Make sure all relevant visual elements have proper descriptive labels and/or textual descriptions
This is a short list of some important first steps to take when beginning the journey into accessibility. Please keep in mind that standards and techniques evolve and are improved constantly, so it is important to keep up with initiatives and government guidelines.
