Web Accessibility Testing Ensuring Universal Access to Information - - PowerPoint PPT Presentation

Web Accessibility Testing

Ensuring Universal Access to Information July 14, 2012

Suvojit Mukherjee, Program Manager – Testing Practice, Collabera

2

• Developer needs to upgrade his certification
• Has developed painful repetitive stress injury

(RSI) in his hands and arms

• Dream State Examples
• Accessibility using the keyboard
• Developer needs to upgrade his certification
• Has developed painful repetitive stress injury

(RSI) in his hands and arms

• Dream State Examples
• Accessibility using the keyboard
• New promotion, needs to get certified in

Advanced Technologies

• Has color blindness
• Dream State Examples
• Ability to distinguish visual elements
• Input elements do not rely on color alone
• High-contrast options
• New promotion, needs to get certified in

Advanced Technologies

• Has color blindness
• Dream State Examples
• Ability to distinguish visual elements
• Input elements do not rely on color alone
• High-contrast options

Accessibility and Disabilities

?

Terry John Ben

• Taking distance learning courses in

SharePoint

• She has been hard of hearing since birth,

uses sign language

• Dream State Examples
• Means other than sound is used to convey

information

• Videos are close captioned.
• Taking distance learning courses in

SharePoint

• She has been hard of hearing since birth,

uses sign language

• Dream State Examples
• Means other than sound is used to convey

information

• Videos are close captioned.
• The screen does not change or refresh

without warning

• Input fields and selection controls are easy

to identify through labels or instructions.

• Multiple ways to navigate to content within

the site

• The screen does not change or refresh

without warning

• Input fields and selection controls are easy

to identify through labels or instructions.

• Multiple ways to navigate to content within

the site

3

?

Sandy Lori April

• Was injured in an industrial accident and is

seeking retraining

• Lost his hearing and became legally

blind, but he can see small portions of a screen

• Dream State Examples
• Input fields and selection controls are easy

to identify through labels or instructions.

• Text can be enlarged up to 200% without

corruption or loss of functionality

• Was injured in an industrial accident and is

seeking retraining

• Lost his hearing and became legally

blind, but he can see small portions of a screen

• Dream State Examples
• Input fields and selection controls are easy

to identify through labels or instructions.

• Text can be enlarged up to 200% without

corruption or loss of functionality

• Attends high school and particularly likes her

programming class

• Has attention deficit hyperactivity disorder

with dyslexia; is also photosensitive and is

• Attends high school and particularly likes her

programming class

• Has attention deficit hyperactivity disorder

with dyslexia; is also photosensitive and is

Accessibility and Disabilities

?

Terry John Ben

prone to seizures when the screen flashes

• Dream State Examples
• Animations / videos do not flash at a rate

that causes seizures.

• Means other than

sound, shape, size, location or orientation

• f content are used to convey

information, indicate an action prone to seizures when the screen flashes

• Dream State Examples
• Animations / videos do not flash at a rate

that causes seizures.

• Means other than

sound, shape, size, location or orientation

• f content are used to convey

information, indicate an action

• Wants to become a Technology

Specialist, wants to do certification

• She is blind and, but does not read braille
• Dream State Examples
• Images have a text alternative that

describes the content of the image

• Decorative images have an empty ‘alt’ tag

so that John can easily skip them

• Wants to become a Technology

Specialist, wants to do certification

• She is blind and, but does not read braille
• Dream State Examples
• Images have a text alternative that

describes the content of the image

• Decorative images have an empty ‘alt’ tag

so that John can easily skip them

4

?

Sandy Lori April

Website with images switched off

5

• Normal user cannot see images, people with RSI will be forced to move mouse
• Tool Tip not visible on mouse over affecting people with partial blindness
• Also voice over will not be generated affecting blind people

Image/Content Issues

• When resized images become

increasingly blurred and pixelate when magnified

• Images of text are “fixed”, cannot

be re-sized in the browser

• Affects people with low vision

6

• Moving content can be a big

distraction

• Screen readers may not be able

to read moving text

• Screen flickering problematic for

people with seizure disorders (photosensitive)

Text, Color and Page Layouts

Texts –

• Rivers of white space, large blocks of CAPITALISED /

italicized / underlined text – not pleasing to the eyes Colour & Contrast

• Colour alone to identify information
• Contrast - red and green as overlapping or adjacent colours,

red on black; and black on red

Increases fatigue, aggravates existing visual disorders

7

red on black; and black on red Page Layout

• Header elements to add structure to a web page
• All headings and sub-headings must use the header

elements h1–h6, and applied logically and sequentially

• Ascending levels of headers (h1, h2, h3, h4, etc…) should

not be skipped

What is Accessibility? Why is it important?

Accessibility:

• A quality of a product or service

that makes it usable by people with one or more physical disabilities, such as restricted mobility, blindness, deafness etc.

• Accessible Features (User defined):
• Short cut keys in office
• High contrast settings in Windows
• Plug and Play Blind/low vision products
• Assistive Technologies (aiding disabilities):
• JAWS Screen reader, Screen magnifiers
• Dragon Naturally Speaking voice

control, Speech recognition

• Adaptive hardware and input

8

Accessibility Standards

Web Accessibility Standards

• W3C’s Web Accessibility Initiative (WAI) – Used by some disability agencies
• WAI Web Content Accessibility Guidelines 2.0 (WCAG) – Used by Govt. & Industry
• 14 guidelines - general principles on accessible design
• 65 checkpoint definitions
• 3 Priority Levels based on importance
• 3 levels of compliance (“A”, “AA”, “AAA”)

9

Other Standards & Guidelines

• ATAG-2.0 – Authoring Tool Accessibility Guidelines by W3C’s WAI
• UAAG-2.0 – User Agent Accessibility Guidelines by W3C
• BS 8878:2010 – British Standard recommendations for Accessibility

U.S. Government Regulations

• Section 508: Federal agencies must make their technology accessible to people with

disabilities

• Section 255: Telecommunications must be accessible to people with disabilities
• Americans with Disability Act: Employers cannot discriminate against disabled employees

Universal Accessibility to Information

• Customer wants all his products/services to be

accessible to all their customers irrespective of

Examples of Disabilities

• Color Blindness
• Repetitive Stress Injury
• Hearing Problems
• Blindness
• ADHD and Dyslexia

Examples of Disabilities

• Color Blindness
• Repetitive Stress Injury
• Hearing Problems
• Blindness
• ADHD and Dyslexia

Examples of Disabilities

• Color Blindness
• Repetitive Stress Injury
• Hearing Problems
• Blindness
• ADHD and Dyslexia

Standards & Guidelines :

• ATAG-2.0
• WCAG-2.0
• UAAG-2.0
• BS 8878:2010

Accessibility Testing – Education Portal

10

their disabilities if any

Customized Accessibility Standards

• The customer has defined their own set of 73

standards, which speak of various prerequisites for accessibility compliance requirements addressing various disabilities

• 33 of the 73 standards scoped as impacting

client web pages and websites for Accessibility

• Collabera tested for Accessibility as per

customized client standards

• ADHD and Dyslexia
• Low vision, hand tremor

and mild short term memory loss

• Deafness, Blindness
• ADHD and Dyslexia
• Low vision, hand tremor

and mild short term memory loss

• Deafness, Blindness
• ADHD and Dyslexia
• Low vision, hand tremor

and mild short term memory loss

• Deafness, Blindness

Validation Design Accessibility Test

Identify Applicable Standards for website Create Test Cases in line with the standards Develop Accessibility Validation Traceability Matrix Accessibility Conformance Validation (Manual / Tools) Accessibility Violation Report

Accessibility Validation Framework & Tools

Violation Findings & Recommendations Remediation Accessibility Revalidation

Create Recommendations Enter Valid Violations and Recommendation in Defect Tool Fix Accessibility Defects Accessibility Conformance Validation (Manual / Tools) Accessibility Violation Report

Accessibility Tools

A-checker Enterprise Worldspace VisCheck Simulator Color Analyzer Color Contrast Analyzer Web Accessibility Toolbar Favelets Web Inspect Tool

Most of the violations across all the web sites were of programmatic access, related to ALT image and Name property

Patterns & Analysis

12 WCAG 2.0 # Description

Colour blindnes s Repetitive Stress Injury Hard of Hearing Total Blindness Short Term Memory Loss Disabled Deaf

1.1.1

Ensure all images have ALT attribute and all active elements in the page has descriptive name property

2.1.1

Ability to access pages by Key board interfaces for all mouse events

2.4.6

Ensure that heading tags are added for the headers in the page and its in logical order

1.4.3

Ensure color contrast ratio of the text with background is at least 4.5:1

2.4.7

Ensure that Visual focus is present on each active element on tab

WCAG-1.4.3-Visible TEXT Contrast

Test Scenario: Colour contrast ratio of the foreground and background colour of the text should be at least 4.5:1 Analysis:

• Support needed for Visually Impaired users
• Support needed for low-vision & colour blind

WCAG 1.4.3 - Remediation

13

Note: Special attention was paid on colours present in websites

Recommended Changes:-

• Developers should modify the foreground or the background color so that a sufficient contrast is

attained

• For standard text less than 18 points or less than 14 points, if bolded, must have a contrast ratio
• f 7:1 or more
• For larger text 18 points or larger; or 14 points if bolded must have a contrast ratio of 4.5:1 or

more

WCAG-1.1.1-Programmatic Access

Test Scenario: All images should be provided 'ALT' text All the active elements, Images and Links should have name property assigned All decorative images should have ALT= “ “ Analysis:

• Images in the low bandwidth need to be provided

ALT Text

WCAG 1.1.1 - Recommendations

14

• Name property helps the user who is visual impaired

Note: Focus was given to see if the images were conveying a meaning to the user

Recommended Changes:

• Alternative text should be replaced with a more informative type of alternative text
• For example, “System center.jpg" is not an informative description of the image
• Page developers should ensure that alt text is a concise and meaningful replacement for the image
• Assign name property to all the active elements, Images and links in the websites

Summary

• Websites need to address Accessibility and testing will aide this immensely
• Test teams need to understand the Accessibility standards, interpret aptly and

apply it to the websites under test

• Understanding Accessible features and Assistive technologies is the key to

15

provide quality accessibility complaint websites

• Analyse the violations and provide the required data points back to the

development teams

• Let us contribute for a more inclusive society