At Achievers, we started the journey of making our platform accessible about a year ago. It involved making existing and any new features accessible. I have created a handy checklist of the tools and techniques used in this process. This checklist can be used by developers and testers to test features and identify areas of improvement.
Before going through the checklist let’s have a look at what accessibility is and why you should even care about making your web content accessible.
What is Web Accessibility?
Web accessibility means that everyone can perceive, understand, navigate, and interact with the Web.
Why is Web Accessibility important?
It is the right thing to do
We all have the right to equal access and equal opportunity. More and more our day to day life activities rely on the web, including education, employment, government, commerce, health care and recreation.
It leads to good practices
Building accessible websites have tendencies to lead towards HTML markup that is semantic and easy for everyone, even computers, to understand and interpret.
It helps to avoid legal concerns
You can get into trouble legally if you’re not careful. There are accessibility guidelines and regulations issued by many countries for the purpose of improving web accessibility. You can be penalized if your web content is not compliant as per the regulations issued by your country.
As an example, in Canada, the Government of Ontario enacted the Accessibility for Ontarians with Disabilities Act in 2005. This act lays the framework for the development of province-wide mandatory standards on accessibility in five key areas of daily life: Customer Service, Employment, Information & Communication, Transportation and Design of Public Spaces.
Accessibility is a layer that should be applied to any content under development. It should be part of the “definition of done” of any web content before it goes to production.
It is as important to know how to check web content for accessibility as it is important to know how to develop web content that is accessible. It should be the responsibility of both developers and testers to verify that any feature being developed is accessible.
The Checklist
Here is a quick checklist that if followed can go a long way to ensure your web content is accessible:
Test with Accessibility Evaluators
- Several free online WCAG accessibility evaluators are available that will scan your web pages for accessibility. WAVE and A-Checker are few of the many options available
Test with the Keyboard
- It is crucial to check that the entirety of your content is navigable by keyboard only
- You should be able to navigate each component through tab keys
- You should be able to access all the interactive features such as menus, links, etc. and should be able to operate them by using intuitive keystrokes such as Enter, space, arrow keys, etc.
- Popups and modals should be able to be cancelled with the keyboard and the Esc key
Test with Screen Readers
- Navigate the website by turning off the screen and using the screen readers and keyboard only
- Ensure that you can navigate through the whole content and you are being provided adequate instructions wherever required
- JAWS, NVDA and VoiceOver are the most popular screen readers. Check out these great articles covering how to use them: Using JAWS to Evaluate Web Accessibility, Using NVDA to Evaluate Web Accessibility, and Using VoiceOver to Evaluate Web Accessibility
Verify Color and Contrast
- As per WCAG Level AA 1.4.3 contrast regulation: Contrast ratio between text and background should be at least 4.5:1
- Fortunately, you can check the contrast for your web content within seconds using multiple colour contrast checkers available for free. These not only tell you the contrast of your present content but also suggest other colour combinations that you can use which would be compliant with this regulation. Two of them are WCAG Contrast Checker and WebAIM Color Contrast Checker
Test Content Scaling
- WCAG Level AA 1.4.4 requires text to be zoomable to 200%. ‘accel’ means the ‘Ctrl’ key on Windows and, usually on Unix, and the ‘Cmd’ key on Mac
- Test after the text is enlarged: Is the page readable and usable? Is horizontal scrolling minimized? Is text and images readable?
Validate your HTML
- Using HTML incorrectly can cause assistive technologies problems in interpreting the page content
- Valid HTML allows screen readers to navigate headers, lists, etc. with proper screen reader shortcuts. The example following shortcuts are provided by JAWS: H: Headings Quick Key; 1–6: Headings level 1–6; L: List Quick Key. Not using semantic markup hinders proper usage of these shortcuts
- Use an HTML validator to evaluate your code
Test with users
- If possible, get your web content tested by users in order to get user acceptance
- Real screen reader user testing aids in getting an entirely different perspective on how your web content will be navigated and will help you make appropriate design and development decisions in the future
“Like usability, accessibility is a quality — in this case, it means how easily and effectively a product or service can be accessed and used.”
Use this checklist to ensure your web content can be used by everyone!
