Testing for Accessibility with Common Screen Readers Hadi Rangin, University of Washington Robert Beach, Kansas City Kansas Community College Lucy Greco, University of California, Berkeley Terrill Thompson, University of Washington Karen McCall, Karlen Communications

Preview Technical vs Functional Accessibility Definition of “Accessible” IT Accessibility Standards Basic Accessibility Considerations Tools & Resources

Technical accessibility Is the coding practice according to the standard (WCAG)? Ensures assistive technologies can effectively interact with the application “Does a particular button in the user interface present itself in a way so that it can be understood by, and interacted using both visual and non-visual means?” Limitation: does not take a holistic view of determining if the pieces of an application work together and if the end user can complete the task effectively in a timely fashion.

Functional accessibility Can the end user accomplish a task to effectively and efficiently use an application, regardless of coding technique? “Can a user successfully compose and send an email to a desired recipient?” Functional accessibility success if the task can be completed by various mode of interactions (mouse, keyboard & AT)

Technical vs Functional Accessibility Accessible techniques are required, but not sufficient Usability with accessibility consideration Both aspects are necessary in developing an accessible application

Definition of “Accessible” “Accessible” means a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, & enjoy the same services as a person without a disability in an equally effective & equally integrated manner, with substantially equivalent ease of use. The person with a disability must be able to obtain the information as fully, equally & independently as a person without a disability.

IT Accessibility Standards World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 1.0 (1999) Web Content Accessibility Guidelines 2.0 (2008) Section 508 Standards Published in 2000 to accompany Section 508 of the Rehabilitation Act (requires federal agencies to procure accessible IT) Covers a broader scope of IT, not just Web Many states & higher education institutions have adopted either WCAG 2.0 or Section 508 as their own standard for IT accessibility

Screen readers: Magic or confusing tool? SR made for end-user 100s of functions to assist end-users Complicated algorithm to compensate for lack of accessibility features SR can be sometimes used to verify issues but not to determine issues Not designed for accessibility testing Bottom-line: Don’t use it for testing unless you know what you are doing

Things We Should Consider before Testing (1/2) Understand the basics of coding practice Focus on Functional accessibility Familiarize yourself with Universal Design in your accessibility solutions Differentiate between your personal preferences and accessibility solutions

Things We Should Consider before Testing (2/2) Utilize developer & accessibility tools for technical accessibility SR can help you partially with technical accessibility Work-around is not an accessibility solution Don’t get lost in your testing and evaluation Be constructive in your report

Consistency Visual consistency Functional consistency Proper use of elements

Keyboard Operability Be able to navigate to all focusable elements Be able to fully perform all applicable functions Links, Forms controls, Menu, Expand/collapse, Carousel, Modal, Custom widgets, etc. Be able to always to see the visual focus indicator Logical tab order Shortcut keys alone do not make application accessible

ARIA Landmarks Integrity of ARIA landmarks throughout the application No orphaned content Meaningful labels

Heading Structure Hierarchical Meaningful Inclusiveness

Lists Group relevant items Use appropriate list type (ordered, unordered & definition lists)

Links Meaningful link text Not short, not long, not empty Distinctive hover effect and keyboard focus Link vs button Alt text for icon links Links to external resources

Forms Meaningful form control labels Required Verification and error handling

Data Tables Simple vs complex data tables Cell and column/row headers (association) TH/SCOPE technique ID/HEADERS association technique Can be tested nicely with screen readers

Graphics Meaningful text for informational graphics Keep stylistic graphics in the background, so screen readers ignore them: CSS background images alt="" role="presentation"

Color Contrast Adequate color contrast between foreground (text or graphic) and background WCAG 2.0 Level AA has very specific requirements: A 4.5:1 contrast ratio for normal sized text A 3:1 contrast ratio for large text (at least 18 point or 14 point bold)

Tools How to use keyboard-only AInspector Toolbar http://ainspector.github.io/ WAVE Web Accessibility Evaluation Tool http://wave.webaim.org/ How to use keyboard-only http://nomouse.org Color Contrast Checker http://webaim.org/resources/contrastchecker/ WC3 Markup Validator https://validator.w3.org/

Resources WCAG 2.0 Guideline https://www.w3.org/TR/WCAG20/ Accessible Widgets Best Practices with ARIA https://www.w3.org/TR/wai-aria-practices-1.1/ Examples of Accessible Widgets http://oaa-accessibility.org/ W3C Notes on using ARIA in HTML http://w3c.github.io/aria-in-html/

More Resources NVDA Keyboard Commands JAWS Keyboard Commands http://terrillthompson.com/tests/keycounts/nvda.html JAWS Keyboard Commands http://doccenter.freedomscientific.com/doccenter/archives/training/jaws keystrokes.htm VoiceOver: Getting Started https://www.apple.com/voiceover/info/guide/

Questions?