ACCESSIBILITY TESTING – CHECKLISTS & TOOLS

books_image

Laura Kalbag, author of

Accessibility for everyone, defines
Accessibility as ‘the degree to which a
website is accessible by as many people
as possible.’

It simply means your product/site should be made accessible to persons with disabilities, such as
vision_impairment_icon
VISION IMPAIRMENT
hearing_disabilities_icon
HEARING DISABILITIES
other_physical_icon

OTHER PHYSICAL OR
COGNITIVE CONDITIONS

Accessibility testing is done to ensure your product meets the needs of all types of users, and
stringent laws across the globe have also made accessibility compliance a compulsory process.
This infographics will take you through the number of action items to be
addressed in an accessibility testing. Before we begin with the checklist,
here are some of the Accessibility related statistics to mind.

STATS TO MIND

19.9 MILLION

Americans have a physical impairment that restricts their use of a keyboard or mouse.

8.1 MILLION

Americans have a visual impairment or have a form of color blindness that require them to use screen readers

7.6 MILLION

Americans have a visual impairment or have a form of color blindness that require them to use screen readers.

80 MILLION

people in the European Union are affected by a disability to some degree.

LAWSUITS THAT YIELDED HEFTY FINES FOR
NON-COMPLIANCE TO ACCESSIBILITY

  • Lawsuit filed against Domino’s Pizza over inaccessibility of online ordering system for visually impaired people
  • Netflix and deaf-rights group settle suit over video captions
  • Beyoncé was sued over her website violating the Americans With Disabilities Act (ADA)
law_balance_Blue_yellow_image

The population and income of the persons with disabilities (PWD) are presented in the table below:

GLOBAL USA CANADA EU6 ASIA6
PWD POPULATION 1.131B 56.7mm 6.2mm 91.0mm 748.0mm
PWD INCOME6 >$1.97T $872.7 $113.3B $983.9B NA
PWD DISPOSABLE6 >1.2T $645.3B $55.4B $482.1B NA

ACCESSIBILITY, AN UNCHARTED ECONOMY

Given the current state of accessibility, it still remains one of the last things to be considered when it comes to product design and development. The main reason for this treatment boils down to ignorance and fear of additional cost and time involved with accessibility testing.

accessibility_an_uncharted_economy_icon

To provide a flawless experience to all users, let’s understand the different techniques that help users access web content, guidelines to be followed by the companies, and checklists to keep in mind for accessibility testing.

QA CHECKLIST FOR ACCESSIBILITY TESTING

Important and globally recognized accessibility guidelines to be followed are,

web_content_accessibility-blue_icon

Web Content Accessibility Guidelines (WCAG). The current stable and reference-able version of WCAG is 2.0, and WCAG 2.1

  • 4 guiding principles of WCAG are:
    • Perceivable
    • Operable
    • Understandable
    • Robust
  • Three levels of conformances include: A, AA, AAA
BD-8878_2010_blue_icon

BD 8878:2010 outlines the decisions needed to be made when designing or commissioning web-based products released by the UK Govt

section_508_blue_golden_icon

Section 508 by the US govt.

All the websites being designed should follow accessibility testing guidelines for one important reason:
the American Disability Act (ADA).

Testing can be performed using,

desktop_mobile_online_tools_icon

Desktop/mobile online tools

keybaord_navigation_icon

Keyboard navigation

screen_reader_icon

Screen reader

color_contrast_tools_icon

Color contrast tools

TEST TOOLS PROCESS
Colors Color contrast tools High contrast: Activate high contrast in Windows, check that all text responds to color changes and that no critical information disappears.
Contrast ratio: Use color contrast analyzer to calculate the contrast ratio per page.

  • Ensure standard text has a color contrast ratio of 4.5:1.
  • Ensure that large text has a color contrast ratio of 3:1 as per WCAG 2.1 AA.

Note

  • Normal Text: Text < 18 point normal or <14 point bold
  • Large Text: Text > 18 point normal or > 14 point bold
Forms Keyboard navigation Ensure that keyboard/keyboard shortcut doesn’t interfere with the web page’s content and functionality and, keyboard focus is always visible.

  • Ensure tab order of the forms are logical and as expected.
  • Ensure all interactive elements (drop-down menus, tab pages, etc.) can be accessed using keyboard alone
  • Ensure that the ARIA 1.1 Authoring Practices are followed for all keyboard interactions.
Tabs Use the Tab key to move through all links and form fields. Confirm that tabbing fields are logical and as expected
Dialog box and pop-ups Keyboard navigation Ensure all dialogs and pop-ups can be dismissed using keyboard and focus is retained on the element which activated dialog box/pop-ups.
Multimedia Keyboard navigation & Screen reader Ensure all multimedia, I.e., Audio, Video, Images, Animated carousels, skip navigation links can be tabbed through and controlled using keyboards and screen readers

  • Ensure all images (decorative/meaningful) have alt/descriptive alt text
  • Ensure videos show or have an option to show closed captions. (For any audio recordings, check that there is a text transcript.)
  • Ensure all controls are labelled properly
Headings Screen reader Ensure users should be able to navigate pages using headings. Ensure headings are logical, structured and it provides the significance of the content on the page Ensure there’s only one H1 tag on page
DESKTOP/MOBILE TOOLS COMPATIBILITY
Desktop Color Contrast Analyzer All browser types
WAVE (Web accessibility evaluation tool) Chrome and Firefox (Browser extension)
Deque tools: AXE Plugin All browser types and extension available in Chrome and Firefox
WAT (Web accessibility toolbar) IE and Opera browser (Browser extension)
FireEyes Plugin Firefox
Screen recorder JAWS IE
NVDA Firefox
Voiceover Safari
Talkback Chrome
Mobile Mobile Web Accessibility Checker Mobile web- iOS only
Accessibility Scanner Android
Accessibility Inspector iOS