Lessons Learned: Accessibility Testing

I was learning about Accessibility Testing last week.
My Inspiration to learning on A11y is Michael Larsen (https://www.mkltesthead.com)

Accessibility Standards: 
WCAG, W3C Standards,  Section 508, European Accessibility Standard EN 301 549





Why Accessibility Testing?
There are different types of disabilities, the users can get impacted.

Visual - Blindness, Low Vision, Color Blindness
Hearing - Mild to Moderate to Severe
Physical - Limited Hand Movement, Muscular Dystrophy, No Limb, Hand or Fingers
 - Not able to use mouse or use touch screen.
Cognitive - Autism, Mental Challenges.
Speech -


Accessibility Testing


Check: Keyboard Only Compatibility
https://www.w3.org/WAI/perspective-videos/keyboard/ 
Physical and Vision Challenges: Mouse

Testing: Use a tab key on keyboard, no additional software required.
Navigate entire the webpage using tab key.
Tab and Shift Tab will take you through Next and Previous Controls on the screen
Enter or Spacebar for Selection and Activation

Complex Interactions:
Rotation of Carousal
Selecting the tab within a set of tabs
Selecting the date from a calendar
These need specific key commands, to be used.

Keyboard Shortcuts
1. ALT+D = Takes me to address bar of the website
2. Space / Enter Keys = To expand
3. Tab - See if it is navigated sequentially
If through keyboard, we are not able to navigate to any controls on the screen
Then it is accessibility violation.


Check: Text Resize

Launch the browser and Open webpage
Zoom the page: CTRL ++ : 200%
There should not be "No Content / Functionality Loss"


Check: Content Reflow
Webpage should be responsive
If we increase Zoom up to 400% =
There should not be "No Content / Functionality Loss"
It should be single column layout
Content should be easily readable without any ambiguity in reading.
There should not be 2 dimensional scrolling.
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Resize_content


Check: Colors & Contrast
Is it easy to read all the content
Are important symbols, selections etc are clearly visible
Is color only way to identify meaning of content

WCAG 2.1 Rules-
1.4.3 - Contrast Minimum: The text and background must have a minimum ratio of 4.5:1

1.4.11 Non Text Contrast: Any symbols, signs, Icons etc must have have minimum color ratio of 3:1
Non-Text Item with its immediately color.
Foreground = Color of Symbol
Background = Color of Background immediately to the symbol.

Minimum ration of 4.5:1 (Text Color with Background)
Beyond 4.5:1 is good

Notes:
A. For 1.4.3 -- Text embedded into the images also needs to be checked
B. Colors on Logos, that are part of branding and those do not have significance are not required to pass the color contrast requirement
C. Though the inactive controls are not required to meet the minimum contrast ratio of 4.5:1, it is good practice to meet the requirement.
D. For certain items if color is the only way to distinguish from surrounding content.
Example: Link within a paragraph, contrast between these two items must be 3:1

https://webaim.org/resources/contrastchecker


Tools:
Color Contrast Analyzer Tool: The 
Paciello Group

WCAG Color contrast checker
https://chrome.google.com/webstore/detail/plnahcmalebffmaghcpcmpaciebdhgdf


Check: Video Testing:
Both Live and Pre-recorded, are captions available?
Are the captions properly synchronized and accuracy?
Are the ADS provided for videos
No music is played automatically on page load.

https://www.w3.org/WAI/media/av/



Other Tools:

WAVE Browser Plugin
https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

AXE Browser Plugin
https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
I understood, Accessibility Testing is not an easy one. Its not just using the tools and finding the errors.

Checklist for Testing:
https://webaim.org/standards/wcag/checklist  

Popular Posts

JMeter Producing Error: Windows RegCreateKeyEx(...) returned error code 5

Understanding about Contract Testing