nova ux - strategies for accessibility - august 2013
Post on 08-May-2015
453 Views
Preview:
DESCRIPTION
TRANSCRIPT
Strategies for AccessibilityNoVA UX Meetup
A panel discussion by Chris Merkel
Director of User Experience,The American Institute of Architects
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
Strategies for AccessibilityNoVA UX Meetup
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
The American Institute of ArchitectsDirector of User Experience
Computech, Inc.Design and UX Lead, FCC Licensing & Auctions
Spikesource, Inc.UX Manager, Microsoft & Intel contracts
Xerox Corporation,Creative Lead, Xerox.com & DocuShare
Yahoo!Producer, Yahoo! Personals
Who’s this Chris Merkel guy?
Disabled friends & veterans
Corporate responsibility
Personal fears: physical injury sight loss
What matters to me?
Changes in legal scope
Larger market share: 25.6 million
Prestige
(and angry mobs with torches)
Why should it matter to you?
What is it?• 1997 update to an
Amendment of the Rehabilitation Act of 1973
How to meet it?• 16 provisions
of Sub-part B, 1194.22*
Who needs to meet it?• All federal agencies
(with some exceptions*)
• State and local agencies Who enforces it?• Each organization
chooses the standards it wants to meet individually
What’s “Section 508”?
More official info: Section508.govComplete, handy practical checklist: webaim.org/standards/508/checklistOfficial federal standards are listed at: section508.gov/index.cfm?fuseAction=stdsdoc
What is it?• Web Content Accessibility
Guidelines from the W3C
How to meet it?• 3 levels of conformance:
A, AA, AAA
• WCAG 1.0 created 1999
• WCAG 2.0 updated in 2008
Who needs to meet it?• Not required by law (yet)
Who enforces it?• 3rd parties such as NFB
• Private companies
• DOJ may soon use WCAG
What’s “WCAG”?
* More info at w3.org/TR/WCAG20/ (2008) and w3.org/TR/WCAG10/ (1999)
Strategies for AccessibilityNoVA UX Meetup, 14 Aug. 2013
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
In the U.S…
Affects 1 in 1225,121,794
8% of men11,882,851
0.4% of women611,703
Color Blindness
Delta: Full Color Vision
Delta: Red/Green Deficiency
Test in Adobe AI or PSD
Color hue combinations
Brightness and contrast
Pattern, shapes, borders
Font families and weights
Techniques for Color Blindness
Full Color 2 types of Red/Green
Blue/Yellow
Exercise 1 : Improve Delta.com
Hot Not
How would you improve this display for more vision types?
5 minutes.
Keep proper contrast
Carefully manage colors which change the most (Yellow, Green, Red)
Highlight interactive thingies better
No “Tiny Text” and wimpy controls
View your UI on more screens & devices
Visual Techniques
Strategies for AccessibilityNoVA UX Meetup
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
Mobility DisordersThey Need Help to Reach That
Complete inability to use limbs
Repetitive stress disorder
Simple fatigue
Mobility Challenges
x Hard to spot
x Hard to click on
X Hard to use
Exercise 1 : Complex Controls
How would you make these controls easier for everyone to use?
5 minutes.
How would you improve these controls for the mobility impaired?
5 minutes.
Inability to use mouse actions:
Cannot rely on : hover or onMouseOver
Interact with elements out of order
Click + Drag
Instead, they:
TAB and Û Ü Ù Ú arrow keys to navigate
SPACE and ENTER to activate
Keyboard Use
Twitter: Visual Focus
Facebook: Visual Focus
Consider the TAB order
Surface intuitive directional and command keys, and common modifiers: , Shift, Control, Escape
Use common HTML controls, then enhance progressively
Make :hover and :focus the same
Keyboard Access Techniques
You, with the smartphone: Inability to use :hover or onMouseOver
Difficulty with Click + Drag
Limited viewing area
Difficulty with lighting
Patchy attention span
Multimedia access
Mobile Users
Exercise 1 : Keyboard Use
How would you make this interaction more equal for everyone?
5 minutes.
How would you improve interactions in this app for the disabled?
5 minutes.
Strategies for AccessibilityNoVA UX Meetup
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
Non-Visual UsersSome People Can Only Hear the Web
Screen Readers Braille Printers
Sightless User’s Devices
Page Title: AccessibilitySkip main navigation linkList with six items...Introduction link...Barriers link... Assistive Technologies, and Alternative Access Strategies link...Accessibility in Law and Policy link...Designing accessible web sites link...Tools for accessibility link...Finding additional resources on Web accessibility link...
A “Soda Straw” Perception
A “Soda Straw” Perception
A “Soda Straw” Perception
A “Soda Straw” Perception
BROWSERS:
IE 8: 43.1%
Firefox 3+: 23.5%
IE 7: 12.5%
Safari: 9.6%
Others: 11.4%(incl. IE6, 9,
Chrome)
SCREEN READERS:
JAWS: 69.6%
NVDA: 34.8%
VoiceOver: 20.2%
Window-Eyes: 19.0%
Others: 29.7%(incl. System Access
& ZoomText)
For Statistics Junkies
2009 to 2010
Dispatch.com
Dispatch.com: Headers & Links
Dispatch.com: Headers & Links
Ongoing Stories, Heading Level 3
Ted Williams… Heading Level 2
Where we live… Heading Level 2
Just like making an outline
Gives blind users a sense of a document’s contents and structure
Search engines will be better able to index your site with this grouping
This only works with real heading tags
Headers
Do your links make sense by themselves?
Links
Do your links make sense by themselves?
Links
Do your links make sense by themselves?
No one wants to…
“Read more, read more, read more, read more, read more”, or;
“Click here, click here, click here, click here, click here”
Links
United.com: Visual Display
Same Site: No Images
<img src="logo-ymail-wh-beta.png" alt=“ " >
<img src="logo-ymail-wh-beta.png" alt=“Home" >
<img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail" >
<img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail homepage" >
What’s the Right Description?
You are designing for sightless users,or who cannot make use of images alone
<img src="logo-ymail-wh-beta.png" id="ymail-image" alt="Yahoo! Mail" >
3 Types of Text Alternatives:1. Blank: alt=“ ” for purely decorative images2. Short: most common alternatives3. Long: for very complex images, e.g. charts
Images and ALT Tags
<table summary=“Items, quantity, and description”>
<caption>Equipment in stock</caption>
<thead> <tr><th>Item</th></tr></thead>
<tbody> <tr><td>Cleats</td></tr></tbody>
</table>
Tables
Equipment in stock
<ol> Ordered List<li> List Items
<ul> Unordered List<li> List Items
<dl> Definition List<dt> Definition Terms
<dd> Definition Description (s)
Types of Lists
Lists: Google Search Results
List with 10 items…Out of list, List item one…Accessibility and Assistive Technology…
How to Emphasize Text?
<em>Accessibility 2011</em>:
Escape! | <em>Facebook</em>
Skip Links
A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address www.amazon.com/access ... Link.
Document Landmark Roles
articlebannercomplementarycontentinfomainnavigationsearch
Introduction to WAI ARIA
banner
main
navig
ati
on
contentinfo
article
article
Document Landmark Roles
Introduction to WAI ARIA
banner
main
navig
ati
on
contentinfo
article
article
<li role=“article“ > ... </li>
<div role=“main“ > ... </div>
1. Use real headings in an outline order
2. Include a text alternative for all images
3. Write intuitive linked text & commands
4. Construct tables properly
5. Give users ways to skip through content
6. Don’t rely on mouse interactions
Non-Visual Techniques
Improve Twitter for Access
How would you make this application more equal for everyone?
5-10 minutes.
How would you improve Twitterfor the disabled?
7 minutes.
Form ConstructionMaking Pesky Forms Accessible
NORMAL READING
Speaks the content of an entire window
Most users skip through content via shortcut keys
FORMS EDIT MODE
Turns on when focusing on a form control
Users then TAB from one field or control to another
They do not hear any text that is not part of a field
Screen Reader Modes
All form fields need a label
United.com: Field Labels
<label for="shipping-user-companyName" > <span>Company Name (optional)</span></label><input name="shipping-user-companyName" type="text" id="shipping-user-companyName" aria-label="Company Name (optional)" >
Apple.com: Advanced Labels
Asterisks aren’t good enough• Add understandable text to form labels
Use additional attributes:
<input type="text" id="contactname“ name="contactname" size="30“ aria-required="true" >
Mark Form Fields Required
Make the form easy to find
Associate labels and instructions with all controls
Carefully manage page refreshes, focus, and error display
Number items in long forms with <OL>
Mark required fields in meaningful ways
Form Construction Techniques
Your Best Friends are Blind
BingGoogle
Android Voice or iOS Siri
Desktop screen reader (e.g. JAWS)
Strategies for AccessibilityNoVA UX Meetup
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
Highlight & Announce Focus
Negative “tabindex” lets an element receive programmatic focuswithout getting in the way of TAB key
<div id="progaccess" tabindex="-1" > ... </div>
var objDiv = document.getElementById('progaccess'); // Focus on the element objDiv.focus();
TAB Order
ARIA Live Regions
off: <ul aria-live="off" > … </ul>
polite: <ul aria-live="polite" > … </ul>
assertive: <ul aria-live="assertive" > … </ul>
Handle Data Refresh with ARIA
Twitter: Page Changes
Twitter: Page Changes
Roles:applicationgridgridcellalertbutton
States and properties:aria-labeledbyaria-disabledaria-grabbedaria-dropeffect
Announce States with ARIA
Carefully manage page refresh & errors
Alert non-visual users to any changes
Ensure the proper focus in widgets and dialogs during user interaction
Keep keyboard commands in mind
Use libraries: YUI, jQuery UI, GWT, etc.
Scripting Techniques
Strategies for AccessibilityNoVA UX Meetup
Agenda: • Introduction
• Visual Perception
• Navigation and Forms
• People and Robots
• Managing Focus
• Review, Q&A
Visual Display
Test your color use
Highlight your controls
No more “Tiny Text”
Navigation
Use real headings
Links make sense alone
Functionality
Test with more devices
Label carefully
Manage focus properly
Content
Supplement controls with instructions
Don’t assume that your users share your same abilities
Perceptible
Sight /not
Hearing /not
Touch /not
Understandable
Meaning and context
Alternatives
Operable
Interaction methods
Control over time, focus
Error recovery
Robust
Universal across devices
Future-proof across time
P.O.U.R. it Out
Contact me anytimechristophermerkel@yahoo.com |
@merkelwerks
top related