Upload
ahmad-witherell
View
218
Download
1
Tags:
Embed Size (px)
Citation preview
Cross-platform accessibility fundamentalsfor testers
1
BCS SIGIST Winter 2014 conference4 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
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 theoryAccessibility 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 theoryAccessibility 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 theoryAccessibility API fundamentals
A dialog takes place between an application and assistive technology.
12
Accessibility theoryAccessible 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 theoryAccessible Object Properties
• Examples in HTML– role:<img alt="Can of soda" src="soda.jpg">
<label for="last">Last name</label><input type="text" id="last" name="last" value="Bloggs">
– name:<img alt="Can of soda" src="soda.jpg">
<label for="last">Last name</label><input type="text" id="last" name="last" value="Bloggs">
14
Accessibility theoryAccessible Object Properties
• Examples in HTML– state:<label for="last">Last name</label><input type="text" id="last" name="last" value="Bloggs" disabled="disabled">
– value:<label for="last">Last name</label><input type="text" id="last" name="last" value="Bloggs">
15
Accessibility theoryAccessible Object Properties
• An accessible name is required and identifies an object. It is short and does not necessarily describe the object.
<label for="date">Event date</label><input type="text" id="date" name="date">
• An accessible description is optional text that provides additional information about an object.
<label for="date">Event date</label><input type="text" id="date" name="date” aria-describedby="instructions"><p id="instructions">Must be in mm/dd/yyyy format.</p>
16
Accessibility testing tools
Web Accessibility Toolbar
Thank you!
• I’m Jon Gibbins– @dotjay on Twitter– For more information contact:
[email protected]• Slides available at:
http://a11y.cc/sigist2014• 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 hello@
diginclusion.co.uk
© Jon Gibbins 22