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 BlindnessHearing - 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.
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.
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
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/
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/
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
Chrome Browser Accessibility Developer Tools
NCSU Color Contrast Analyser
https://chrome.google.com/
MS Insights for Web
Tools: https://chrome.google.com/
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
