Website Accessibility Tools: Screen Readers, Browser Extension, Color Contract Tools
Development and Testing Tools
Starting with Browser Testing Tools (accessibility in the browser)
1. WAVE — Web Accessibility Evaluation
The WAVE Chrome and Firefox extensions allow you to evaluate web content for accessibility issues directly within Chrome and Firefox browsers. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting.
Download Link: https://wave.webaim.org/extension/
Chrome Extension: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
a) Install the extension (by clicking Add to chrome button)
b) It will look like this
c) Enjoy tool is installed successfully
How to use
- In a Google Chrome window, navigate to the page you’d like to run the tool on.
- In the upper right corner, click on the WAVE icon.
- A new panel will open on the left of your browser with a summary of errors, alerts, features, etc.
To view errors
- After you scanned the page with WAVE, click on the Flag icon.
- If you have errors, you should see the error count and red icons to represent each error found.
- For example, I am taking example amazon.ca
- At the bottom-center of your window, click on the green code tab to expand that panel.
- Click on one of the red icon (1) in the picture
- In the green code panel, it should have jumped to the section of code that contains the error.
- For Color Contract Errors — Please always prefer to use Colour Contrast Analyser with a color picker. Colour Contrast Analyser will provide the correct results.
2) AXE — Web Accessibility Testing
Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe™ Chrome extension. Drop the axe on your accessibility defects!
Download link: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
a) Install the extension
b) It will look like this
c) Enjoy tool is installed successfully
How to use
Open Chrome’s DevTools (Control + Shift + I)
Select the aXe tab.
Click the Scan all of my page or scan part of my page button
Results will be displayed as below and if you click on each row, it will provide a detailed description of the error
3) ARIA Validator — Scans page for WAI-ARIA implementation issues
Download link:
a) Install the extension (by clicking Add to Chrome button)
b) It will look like this
c) Enjoy tool is installed successfully
How to use
- Google Chrome window, navigate to the page you’d like to run the tool on.
- In the upper right corner, click on the ARIA Validator (AV).
- A new open will open on your browser with a summary of errors, alerts, features, etc.
Error example with Wikipedia site
4) Google Lighthouse
Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps
Download link
a) Install the extension
b) It will look like this
c) Enjoy tool is installed successfully
5) Chrome DevTools
Accessibility audits in the Lighthouse Audits panel in Chrome DevTools, the new accessibility debugging tools in the Elements panel, and/or the the aXe extension by Deque System
a) Chrome inspect — Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect."
How to use
Open Chrome’s DevTools (Control + Shift + I)
Select the lighthouse tab.
Click on Generate report
Report Result details
Development Tools
These you need to install to perform the accessibility testing because they are not available as Chrome extensions.
6 ) Colour Contrast Analyser (Free)
The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.
Official website link: https://developer.paciellogroup.com/resources/contrastanalyser/
Download Link:
a) Download the extension and install it
c) Enjoy tool is installed successfully
Official Step How to use
7) Screen Reader (NVDA / JAWS / VoiceOver/ ZoomText Magnifier )
a) NonVisual Desktop Access (NVDA) — is a free and open-source screen reader for the Microsoft Windows operating system. Providing feedback via synthetic speech and Braille enables blind or vision impaired people to access computers running Windows for no more cost than a sighted person. NVDA is developed by NV Access, with contributions from the community
Official Download link: https://www.nvaccess.org/download/
Official User Guide: https://www.nvaccess.org/files/nvda/documentation/userGuide.html
How to use
- Choose Start, All Programs, NVDA, NVDA. …
- To hear what is currently on the screen, start moving the mouse around. …
- To pause NVDA, press the Control key on your keyboard. …
- Most NVDA commands require you to use the Insert key on your keyboard. …
- To quit NVDA, press Insert, Q.
Basic Commands
https://www.nvaccess.org/files/nvda/documentation/userGuide.html?#BasicNVDACommands
b) VoiceOver is a screen reader program that comes on new Mac computers, iPhones, iPads, and iPod touches. You can read everything from the current position with a Two-Finger Swipe Down command, and you can select each element in the DOM in sequence with a Swipe Right or Left.
How to use
- Turn VoiceOver on or off: Command + F5.
- Pause: Control.
- Start reading again: Control + Option + A.
- Read one element at a time: Control + Option + Right Arrow
Basic Commands
Official Guide
8) JAWS -(Paid) — Job Access With Speech, is the world’s most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse. JAWS provides speech and Braille output for the most popular computer applications on your PC.
Download Link — You can download and install without the license key . But it will work only for 40 minutes mode .
40-Minute Mode.
The 40 Minute Mode is provided as a limited time duration license mode of the Program, which can be used to get started during the installation process of the Program or for a limited demonstration of how the Program works. The Program in 40 Minute Mode has a Term limited to forty (40) minutes in duration. Every Program that does not have an active license to use the Program (including, for example, after expiration of the Term of the License) or an associated key will operate in this 40 Minute Mode. The 40 Minute Mode is not intended for commercial use other than use while waiting for an active license to use the Program or an associated key to arrive or be installed. The 40 Minute Mode also provides emergency access to a Computer for an End User when an active license to use the Program or a key is not present or associated with a Computer. If the Program reverts to the 40 Minute Mode, an active license (or key) is required to return the Program to full capability
Pricing Details :
How to use
- To start JAWS reading the screen, press the key combination INSERT+DOWN ARROW.
- This is the Say All command.
- While using the Say All command, you can press the LEFT or RIGHT ARROW keys to rewind or fast forward through the text.
- You can also press PAGE UP or PAGE DOWN to increase or decrease the speech rate.
Some Official links for keyboard shortcuts
9) ZoomText (Paid) — ZoomText is the world’s leading magnification and screen reading software for the visually impaired.
Official website :
Download link :
How to start
a) When you first start ZoomText, the ZoomText toolbar appears, and your screen displays in Full view mode with 2x magnification.
b) If you are running ZoomText Magnifier/Reader, speech is also enabled.
c) If you need to briefly silence speech, press CTRL
Steps guide (How to use it)
Resources and References
- WCAG: https://www.w3.org/WAI/standards-guidelines/wcag/
- Section 508: https://www.section508.gov/manage/laws-and-policies
- Accessibility for Everyone by Laura Kalbag: https://abookapart.com/products/accessibility-for-everyone
- Microsoft Accessibility Guidelines: https://docs.microsoft.com/en-us/windows/desktop/accessibility
Click below to learn about basic information
PART 1- https://kirtikau.medium.com/what-is-accessibility-accessibility-terms-and-definitions-6944e110aed1
Conclusion
This is the explanatory medium story of Screen Readers, Browser Extension, Color Contract tools for Website Accessibility if you have any doubts, please mail me at kirtikau@gmail.com
I will also share some video’s how to use each tool.
Feel free to provide feedback because I am also learning lots of things and it’s not possible to be perfect without sharing knowledge :)
Stay safe and happy learning.
