Strategies for Accessibility NoVA 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
72
Embed
NoVA UX - Strategies for Accessibility - August 2013
Chris Merkel, Director of User Experience at The American Institute of Architects (AIA), gave a talk about strategies for addressing accessibility in the design process for websites and applications for desktop and mobile.
This was an interactive presentation : Chris took questions and threw challenges out to the audience, who came ready to put on their problem-solving hats and dug into exploring solutions for user experiences that are more readily accessible to everyone.
This meetup was sponsored by 3Pillar Global for dinner for this event, and beverages were provided by AddThis. Thanks!
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
• 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
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
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.