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 pluginViv 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 accessibility.
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 AAA standards:
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. MacOSX voiceoverMac 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 easilynavigate 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!
