Testing Tour #6: Accessibility Testing with Viv Richards!
This year has definitely been a rollercoaster ride and I wanted to have small victories to signify that I have been resilient during
times of distress. One of those was to wrap up my testing tour which I had happily kickstarted in the beginning of the year!
Huge thanks to Viv, for agreeing to be on my testing tour and ending the year on a high note! Cheers! :)
Viv and I took the role of driver and navigator interchangeably, which led to a wonderful pairing and learning session. We discussed
and played around with the chrome lens plugin and MAC OSX inbuilt voiceover capability.
Chrome lens plugin
Viv explained to me about the power of chrome lens plugin - ChromeLens is a set of developer tools that allow developers to code
websites better suited for the visually impaired.
The three tools that are currently available are:
Filters to experience a website as a blind or colorblind person.
Scanners to audit the accessibility readiness of a website.
Trackers to visually show the path of a tab/shift-tab navigation flow with the keyboard.
As an end-user, you have the option to choose the level of visual impairment - partially blind to specific color blind to fully blind.
With the filters on, now you can browse your website as how a color blind person sees it. We leveraged Viv’s website for testing
While inspecting the elements on the website: https://sweetshop.netlify.app/login.html
we identified that the Login label wasn’t complying with the accessibility standards:
On hovering over the palette to move it to a different color spectrum, we were able to get it to an admissible color as per AA and
Learned about AA and AAA standards for accessibility testing. AAA standards are the most strict and are levied on government
websites. ‘A’ standards are lenient and most of the websites comply with it.
Mac OS X version Snow Leopard and above VoiceOver is a built-in screen reader for Mac OS X. VoiceOver will benefit users
who are blind or low-vision to use a computer. The latest version of VoiceOver includes gesture support, braille display mirroring,
and spoken hints, and many new web page support options. VoiceOver is an industry‑leading
screen reader that describes exactly what’s happening on your device. Auditory descriptions of onscreen elements help you easily
navigate your screen through a Bluetooth keyboard or simple gestures on a touchscreen or trackpad. And with unique rotor
gestures that function like a dial
on the trackpad, you can make content such as websites a breeze to browse.
As I was playing around with VoiceOver, I figured how we can leverage MacOSX inbuilt capability to enable voiceover.
The voiceover started prompting me where I had clicked on the browser window each time:
When I kept clicking the tab button, it also highlighted it and there was voiceover, which said:
In order to manually validate accessibility, here’s a quick checklist:
Whether an application provides keyboard equivalents for all mouse operations and windows?
Whether tabs are ordered logically to ensure smooth navigation?
Whether shortcut keys are provided for menus?
Whether application supports all operating systems?
Whether all labels are written correctly in the application?
Whether the color of the application is flexible for all users?
Whether images or icons are used appropriately, so it's easily understood by the end users?
Whether an application has audio alerts?
Whether a user is able to adjust audio or video controls?
Check to ensure that color-coding is never used as the only means of conveying information or indicating an action
Whether highlighting is viewable with inverted colors? Testing of color in the application by changing the contrast ratio
Whether audio and video related content are properly heard by the disability people ?
Thus accessibility testing can help in making your application accessible to everyone. Happy testing!