Cross-platform accessibility fundamentals for testers 1 BCS SIGIST Winter 2014 conference 4 December 2014 Jon Gibbins © Jon Gibbins

Introduction Jon Gibbins –Accessibility consultant at Dig Inclusion –Web developer since 1999 –Assistive technologist since 2002 –Training since 2012 © Jon Gibbins 2

How? Assistive technology –Speech output (screen readers) –Braille output –Voice input –Magnification 3

Demo: VoiceOver on iOS 4

Lots of accessibility testing tools across multiple platforms 5

There’s no replacement for testing with real users 6

Cross-platform accessibility testing? 7

Accessibility principles Name, role, state Text alternatives: images, audio, video Labeling: form controls, headings, buttons Structure: headings, lists, landmarks Keyboard access and focus Content / focus order Use of colour/colour contrast Multimedia Time Use native controls where possible Use web standards for web content © Jon Gibbins 8

Accessibility principles Name, role, state: the baseline information that a browser passes on from your website to assistive technologies. © Jon Gibbins 9

Accessibility theory Accessibility API fundamentals We know what assistive technology is, but how does it work? Accessibility APIs –Present user interfaces as information rather than a purely graphical medium, translating an application’s user interface into information that assistive technology can understand –Allow an application’s user interface to be changed by the assistive technology –Provide a common vocabulary we can use when talking about accessibility. 10

Accessibility theory Accessibility API fundamentals Accessible Object Properties –User interface is represented as a hierarchy of accessible objects –Each object has a variety of properties, such as: name: Defines a label. (“Hi, what’s your name?) role: Defines the behavior. (“So, what do you do?”) state: Defines the current condition. (“How are you?”) Accessible Events –Accessibility APIs notify assistive technologies of changes by broadcasting events. 11

Accessibility theory Accessibility API fundamentals A dialog takes place between an application and assistive technology. 12

Accessibility theory Accessible Object Properties Example: a checkbox in a desktop application –role: check box –name: Open new windows in a new tab instead –state: checked 13

Accessibility theory Accessible Object Properties Examples in HTML –role: Last name –name: Last name 14

Accessibility theory Accessible Object Properties Examples in HTML –state: Last name –value: Last name 15

Accessibility theory Accessible Object Properties An accessible name is required and identifies an object. It is short and does not necessarily describe the object. Event date An accessible description is optional text that provides additional information about an object. Event date <input type="text" id="date" name="date” aria-describedby="instructions"> Must be in mm/dd/yyyy format. 16

Inspection tools aVieweraViewer on Windows

Inspection tools Accessibility Inspector in OS X (part of Xcode)

Accessibility testing tools Web Accessibility Toolbar

Questions?

Thank you! I’m Jon Gibbins on on Twitter –For more information contact: Slides available at: Feedback gratefully received! © Jon Gibbins 21

Copyright Copyright 2014 Jon Gibbins/Dig Inclusion –This material may not be shared or distributed without express permission from Dig Inclusion –For more information contact © Jon Gibbins 22