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

Accessibility and Disabilities • • New promotion, needs to get certified in New promotion, needs to get certified in Advanced Technologies Advanced Technologies • • Has color blindness Has color blindness • • Dream State Examples Dream State Examples Terry • Ability to distinguish visual elements • Ability to distinguish visual elements • Input elements do not rely on color alone • Input elements do not rely on color alone • High-contrast options • High-contrast options Ben John • • Developer needs to upgrade his certification Developer needs to upgrade his certification • • Has developed painful repetitive stress injury Has developed painful repetitive stress injury (RSI) in his hands and arms (RSI) in his hands and arms ? ? • • Dream State Examples Dream State Examples • Accessibility using the keyboard • Accessibility using the keyboard • The screen does not change or refresh • The screen does not change or refresh without warning without warning April Sandy • Input fields and selection controls are easy • Input fields and selection controls are easy to identify through labels or instructions. to identify through labels or instructions. • Multiple ways to navigate to content within • Multiple ways to navigate to content within the site the site Lori • • Taking distance learning courses in Taking distance learning courses in SharePoint SharePoint • • She has been hard of hearing since birth, She has been hard of hearing since birth, uses sign language uses sign language • • Dream State Examples Dream State Examples • Means other than sound is used to convey • Means other than sound is used to convey information information • Videos are close captioned. • Videos are close captioned. 3

Accessibility and Disabilities • • Was injured in an industrial accident and is Was injured in an industrial accident and is seeking retraining seeking retraining • • Lost his hearing and became legally Lost his hearing and became legally blind, but he can see small portions of a blind, but he can see small portions of a screen screen Terry • • Dream State Examples Dream State Examples • Input fields and selection controls are easy • Input fields and selection controls are easy to identify through labels or instructions. to identify through labels or instructions. Ben John • Text can be enlarged up to 200% without • Text can be enlarged up to 200% without corruption or loss of functionality corruption or loss of functionality • • Attends high school and particularly likes her Attends high school and particularly likes her programming class programming class ? ? • • Has attention deficit hyperactivity disorder Has attention deficit hyperactivity disorder with dyslexia; is also photosensitive and is with dyslexia; is also photosensitive and is prone to seizures when the screen flashes prone to seizures when the screen flashes April Sandy • • Dream State Examples Dream State Examples • Animations / videos do not flash at a rate • Animations / videos do not flash at a rate that causes seizures. that causes seizures. • Means other than • Means other than sound, shape, size, location or orientation sound, shape, size, location or orientation Lori of content are used to convey of content are used to convey information, indicate an action information, indicate an action • • Wants to become a Technology Wants to become a Technology Specialist, wants to do certification Specialist, wants to do certification • • She is blind and, but does not read braille She is blind and, but does not read braille • • Dream State Examples Dream State Examples • Images have a text alternative that • Images have a text alternative that describes the content of the image describes the content of the image • Decorative images have an empty ‘alt’ tag • Decorative images have an empty ‘alt’ tag so that John can easily skip them so that John can easily skip them 4

Website with images switched off • 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 5

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 • 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) 6

Text, Color and Page Layouts Increases fatigue, aggravates existing visual disorders 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 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 7

What is Accessibility? Why is it important? • Accessible Features (User defined): • Short cut keys in office Accessibility: • High contrast settings in Windows • A quality of a product or service • Plug and Play Blind/low vision products that makes it usable by people with one or more physical • Assistive Technologies (aiding disabilities): disabilities, such as restricted • JAWS Screen reader, Screen magnifiers mobility, blindness, deafness etc. • 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”) 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 9

Accessibility Testing – Education Portal Standards & Guidelines : • ATAG-2.0 • WCAG-2.0 • UAAG-2.0 • BS 8878:2010 Examples of Disabilities Examples of Disabilities Examples of Disabilities � � � Color Blindness Color Blindness Color Blindness � � � Repetitive Stress Injury Repetitive Stress Injury Repetitive Stress Injury Universal Accessibility to Information � � � Hearing Problems Hearing Problems Hearing Problems • Customer wants all his products/services to be � � � Blindness Blindness Blindness accessible to all their customers irrespective of � � � � � � ADHD and Dyslexia ADHD and Dyslexia ADHD and Dyslexia ADHD and Dyslexia ADHD and Dyslexia ADHD and Dyslexia their disabilities if any � � � Low vision, hand tremor Low vision, hand tremor Low vision, hand tremor and mild short term and mild short term and mild short term Customized Accessibility Standards memory loss memory loss memory loss � � � Deafness, Blindness Deafness, Blindness Deafness, Blindness • 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 10

Accessibility Validation Framework & Tools Create Test Cases Identify Applicable Develop Accessibility Validation Validation Standards for in line with the Traceability Matrix Design website standards Accessibility Accessibility Conformance Accessibility Violation Test Validation (Manual / Tools) Report Violation Findings & Accessibility Tools Recommendations Create Enter Valid Violations and Recommendations Recommendation in Defect Tool A-checker Enterprise Worldspace VisCheck Simulator Color Analyzer Color Contrast Analyzer Remediation Web Accessibility Toolbar Fix Accessibility Favelets Web Inspect Tool Defects Accessibility Revalidation Accessibility Conformance Accessibility Violation Validation (Manual / Tools) Report