In an ideal world, the plethora of information on the World Wide Web should be accessible for any user, regardless of disabilities such as those who are hard of hearing, low vision or any other visual, physical or motor disability. Fortunately, we’ve come a long way since then and have passed laws and regulations for educational, federal and customer-facing sites such as ADA (Americans with Disabilities Act) and AODA (Accessibility for Ontarians with Disabilities Act).
For blind and visually impaired users, using a screen reader is an important assistive technology (AT) device that helps with navigating a website. They rely on semantic HTML which helps convey more meaning to a webpage and provide accessible navigation. Several considerations need to be made in order to make webpages accessible such as
- properly structured heading hierarchy and levels (so that users can differentiate between critical and less important text and information)
- descriptive images, links and buttons
- keyboard-only navigation (making sure every part of a webpage can be navigated without using a mouse)
- colour contrast
To make sure websites and applications are accessible and inclusive, it’s best practice to refer to Web Content Accessibility Guidelines (WCAG) and to design with accessibility in mind from the start of a project rather than making it an afterthought.
In this post, we’ll be exploring 5 useful web accessibility plugins for the Google Chrome web browser that can be easily implemented and will help you enhance the web accessibility and user-experience of your site.
1. Tota11y Plugin, from Khan Academy
This simple, easy-to-use, accessibility tool checks for various possible accessibility issues on your webpage. It provides plugins that detect potential accessibility problems in regards to heading structure, contrast, link text, input labels, ARIA landmarks and images. What’s great about this plugin is the use of annotation that pinpoints where the error is and how many there are, detailed error descriptions and recommendations on how to fix them. You can read more about it here.
2. SiteImprove Accessibility Checker
Another useful web accessibility tool. What distinguishes this one from the first plugin is the ability to choose filters relating to WCAG conformance levels (A, AA, AAA), level of issue severity and the ability to choose which person (editor, webmaster, developer) would best be suitable to fix and handle issues found on your site.
3. WAVE Evaluation Tool
A more robust, detailed (although slightly image/icon heavy) tool that analyzes web accessibility. This plugin outlines webpage errors, alerts, features, and structural HTML5 and ARIA elements. It also provides a built-in colour contrast ratio checker.
4. Accessibility Developer Tools
Offered by Google, here’s another accessibility tool that audits your webpage and checks for issues. It shows you a score on the side out of 100 and audits your webpage can improve on and audits that your webpage has passed (i.e., using meta tags properly, structured and descriptive elements). Compared to the other plugins, it’s less visual and does not indicate which WCAG standard it is testing for.
Lastly I’ve added this tool which helps you check specifically for CSS elements (such as font and text, colour and background, box, positioning and effects) without digging into code. You can always use Developer Tools although this is a slightly more simpler process (all you need to do is just click the plugin and hover over any element) to view certain elements in just one go.
Have you used any of these plugins before? Which one do you prefer? What’s your experience been in regards to web accessibility? Feel free to share in the comment section below!