3. WHO USES ASSISTIVE
TECHNOLOGY (AT)?
Blind customers
with a screen reader that describes the page
using synthesized speech or braille output.
Low-vision customers
who use large fonts or a screen magnifier.
.
Motor-impaired customers
who can’t use a mouse and may use
a special keyboard or voice-control interface.
4. HOW DOES AT WORK?
Screen readers interpret webpages, allowing the customer to find both
static text and interactive elements.
Screen magnifiers “zoom” into the site at a minimum of 200% so the
customer sees only a portion of the screen at a time.
In both cases, web sites are navigated with keyboard controls only.
11. PERCEIVABLE
Information and user interface components must be presentable to
users in ways they can perceive.
What if you couldn’t distinguish red/green?
What if you couldn’t see the image?
12. OPERABLE
Links and navigation, user controls, and page features must function in
a way that is operable by everyone.
Considerations:
What if you had no
mouse?
What if you couldn’t see
the buttons or images?
13. UNDERSTANDABLE
Content should be written and presented in a way that is
understandable to everyone
Considerations:
What if you only “heard” a link/button?
What if you had dyslexia and a time limit?
What if you couldn’t see the icon?
15. 1.1
All non-text content that is
presented to the user has a text
alternative that serves the
equivalent purpose.
16. TEXT ALTERNATIVES
HIGHLIGHTS
Alt Text must be long enough
x to completely describe
important image Level A
x
Use null alt text “” on purely
decorative elements AT should
ignore. Level A
x Form labels must be used to
x associate text with fields
Level A
http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html
19. MULTIMEDIA
HIGHLIGHTS
Captions for all prerecorded
x video content with audio
tracks. (Level A)
Audio description (voice over
and action description) for
x video content. (Level AA)
x Controls (play, stop etc) must
x be accessible (text versions of
graphic buttons) and
controllable by keyboard.
(Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv.html
20. 1.3
Content can be presented in
different ways (non-visually or
visually magnified) without losing
information or structure.
21. STRUCTURE/SEQUENCE
HIGHLIGHTS
Information, structure, and
x x relationships conveyed through
presentation are also available
in text. (Level A)
Correct reading sequence can be
programmatically determined.
(Level A)
Understanding and operating
content does not rely on shape,
size, visual location, orientation,
or sound. (Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation.html
22. DOM vs DESIGN
The AT user “sees” only DOM, not design. So the DOM is the user's mental
image of the document structure: No left or right, only up and down the DOM.
Create logical sections of the document to help identify interface elements that
are related.
HTML5 semantic elements like <nav>, <header>, and <h1> are useful here.
Make sure parts of controls are grouped together in the DOM.
For example, the drop-down menu button and the drop-down menu itself.
Use CSS for layout instead of tables.
23. INTERACTIVE CONTROLS
Use native HTML tags instead of generic divs or spans.
Why?
Screen readers can't identify generic divs or spans as controls.
Generic divs or spans aren't focusable, so they can't be activated with the
keyboard.
25. VISUAL CONTRAST
HIGHLIGHTS
! Text and images of text has
! a contrast ratio of at least 4.5:1.
! (Level AA)
Text can be resized up to 200%
without loss of content or
functionality (Level AA)
! Text is used rather than image
text (logo excepted). (Level AA)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast.html
26. ARIA FOR SCREEN READERS
ARIA attributes provide semantic information to screen readers that is normally conveyed
visually.
Use the ARIA role attribute to indicate that a generic tag is playing the role of a standard
widget like a button.
ARIA roles also indicate composite controls that do not have a native HTML equivalent.
ARIA landmark roles can be used to identify separate areas of your site.
http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
28. KEYBOARD ACCESSIBLE
HIGHLIGHTS
x All functionality is operable
x
x through a keyboard
interface. (Level A)
No keyboard “traps”. If focus
x can be moved to a component of
x the page using a keyboard
interface, then focus can be
moved away from that
component using a keyboard
interface. (Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation.html
29. MANAGE FOCUS
Keyboard-only users navigate by moving focus through the DOM.
We have to proactively place focus with element.focus() to create an efficient
workflow.
When changing tabs, navigating to an overlay, etc - put focus in an appropriate
element in the new view.
When that view is closed, return focus to where it was.
31. ENOUGH TIME
HIGHLIGHTS
If a time limit is set for task
completion, must be able to
adjust the timing. (Level A)
For any moving, blinking or
x scrolling information that (1)
x starts automatically, (2) lasts
more than five seconds, and (3)
is presented in parallel with
other content, there is a
mechanism for the user
to pause, stop, or hide it.
(Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html
32. 2.4
Provide ways to help users
navigate, find content, and
determine where they are.
33. skip to content?
NAVIGABLE
x HIGHLIGHTS
Bypass blocks of content that
x are repeated on multiple pages
(Level A)
Pages have titles that describe
x topic or purpose. (Level A)
The purpose of each link can be
x determined from the link text
alone. (Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms.html
35. READABLE
HIGHLIGHTS
Identify language of text (<html
lang=“fr”>. (Level A) and language
changes within content <span
lang=“fr”>Francais</span>.
(Level AA)
• Minimum Font size, CSS 100%,
12 points
• Use standard, widely available,
easy to read fonts
• Avoid using italic, strike
through, underline and drop
shadows.
http://http://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html
37. PREDICTABLE
HIGHLIGHTS
When any component receives
focus, it does not initiate a
change of context. (Level A)
x
If entering text or selecting an
option changes the context or
content of a page, user must be
forewarned. (Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior.html
39. INPUT ASSISTANCE
HIGHLIGHTS
If an input error is detected,
x x item is identified and error is
described to the user in text.
(Level A)
x Labels or instructions are
All fields marked with * are x provided when content requires
required. user input. (Level A)
* STREET ADDRESS
http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error.html
40. 4.1
Maximize compatibility with
current and future user agents,
including assistive technologies.
41. COMPATIBLE WITH AT
HIGHLIGHTS
Markup elements have complete
start and end tags, are nested, do
not contain duplicate attributes,
IDs are unique. (Level A)
Name and role can be determined
for all form elements, links and
script components the name and
role; states, properties, and values
that can be set by the user can be
programmatically set. (Level A)
http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat.html
43. MIND SHIFT
1. Wireframe and design with Accessibility in mind.
2. Ensure all new features are built to Level A standards.
3. Test for AT technologies as heartily as we test for IE9.
• Screen Reader
• Screen Magnifier
• Keyboard Only
4. Secure AT users for future user testing.
44. TOOLS & RESOURCES
WCAG Visual Map:
http://www.stamfordinteractive.com.au/the-wcag-2-0-map/
Contrast Analyzer, Version 2.2
http://www.paciellogroup.com/resources/contrast-analyser.html
Firefox Add-on Contrast Checker
https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/
WAVE Toolbar for Firefox
http://wave.webaim.org/toolbar
ChromeVox and ChromeShades
google-axs-chrome.googlecode.com
45. CX
The contents of this presentation were borrowed heavily from the following resources:
CNIB’s Introduction to Web Accessibility and Google Developer’s Day GDD 2011.
Thank you!
