When you consider that roughly 15% of the world’s population (more than 1 billion people) have some form of disability, the importance of accessibility in web design seems pretty obvious. But if those involved in the website’s creation are not directly affected by a disability, accessibility can sometimes be an afterthought.
When considering disabilities and web design, it’s also important to think beyond visual impairments. To learn more about the variety of accessibility issues faced online by those with disabilities, this website is quite illuminating.
Fortunately for web developers, a large amount of accessibility functionality is covered by standard website development practices. But making a site clearer and easier to understand doesn’t only benefit those with accessibility needs; designing with disabilities in mind has the added benefit of improving a search engine’s ability to understand a given website, which also assists in SEO.
However, it is not enough to simply follow SEO and web development best practices. It’s vital that designers go the extra mile toward better accessibility.
If you want to start with the basics of accessibility, the best place to start is the WCAG, or the Web Content Accessibility Guidelines, created by the Web Accessibility Initiative of the World Wide Web Consortium. It’s a bit of a dry read, but a helpful starting point nonetheless. The full specs of WCAG 2.0 can be found here.
The WCAG 2.0 Checklist is also an excellent resource for breaking down the sections into bite-size references before digging deeper into the information-containing tips. The Accessibility Cheatsheet is a little lighter on details, but also a great resource containing references, examples, and links per section.
Getting more specific about web accessibility, contrasting colours are essential for those with visual disabilities because they help with navigation. WCAG recommends a luminance difference of 3:1 or greater of the text and the colour surrounding it. Here’s a great page demoing how various link colours may look to those with types of colour blindness. This helpful contrast ratio tool is also great for coming up with colour contrasts and testing their ratios. However, as mentioned above, it’s important to factor in more than just visual impairment when measuring accessibility. The following tools are great bookmarklets for auditing various aspects of a site:
- Tota11y bookmarklet adds an icon to the bottom left of your screen when activated. From there, you can view information on headings, colour contrast, alt-text and more. There is also an experimental screen reader simulation to see how one might parse your website.
- css bookmarklet will scan your current page and wrap all elements that may need to be reviewed and have their accessibility functionality updated. More information about each specific notification can be found on their website.
But what if your website is closer to a web app in functionality than a website? In that case, WAI-ARIA should be top of mind when developing it as it helps add accessibility functionality to non-standard websites that act more like applications.
Lastly, these “dos and don’ts” designing for accessibility posters can be great reminders about keeping different accessibility requirements in mind when designing.
If you’ve followed along this far, that’s awesome — the first step to improving web accessibility is actually caring about it! Being aware of the needs of others and keeping that in focus while designing is the best thing you can do. It’s an evolving process of tweaks, tests, and self-improvement, but keep working on it. There’s about a billion people in the world that would thank you for it.