What Every UX Pro Should Know About Web Accessibility
12
What Every UX Professional Should Know About Web Accessibility Dana Douglas, UserWorks, Inc. Sarah Deighan, Next Century Corp. 1
description
A discussion on accessibility tips for the UX Professional from User Focus 2014 in Washington DC
Transcript of What Every UX Pro Should Know About Web Accessibility
What Every UX Professional Should Know About Web Accessibility
Dana Douglas, UserWorks, Inc.
Sarah Deighan, Next Century Corp.
1
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Web Accessibility Evaluations
Accessibility is commonly evaluated based on a set of standards: • Section 508• WCAG 2.0
Barriers to conducting formal evaluations might include:• Budget constraints• Schedule constraints• Lack of expert knowledge
However, formal evaluations aren’t the only option.
2
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Goals Increase your accessibility awareness Help you incorporate accessibility into your overall user
experience practices Provide you with basic accessibility knowledge
Highlight five accessibility issues that are common and/or have the greatest impact on users
3
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Issue #1: Keyboard Access
Some users can rely only on accessing a website with a keyboard. So, can these keyboard-only users reach all parts of your webpage?
4
How to test: [Sample Webpage] Put the mouse away and attempt to use the site using
only the keyboard. • Can you see where you are? • Can you perform all of the same actions as with the
mouse?
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Issue #2: Captions
Some users may not be able to listen to the audio that is included on your site. So, can these users understand what is going on in the multimedia you’ve included?
5
How to test: Turn your speakers off or mute the volume and play
the multimedia. • Are there captions available?
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Issue #3: Use of Color
Some users have visual impairments that make colors difficult to see; others cannot distinguish certain colors. So, can these visually impaired users interpret all information on the site?
6
How to test: [Sample Webpage 1] [Sample Webpage 2] First, review the site and identify instances where
color is the sole method of conveying information.• Can another method be used in addition to color?
Then, use a color contrast tool that analyzes the contrast ratio of foreground text against background colors. • Do the contrast ratios meet recommended
guidelines?
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Issue #4: Form Fields
7
Screen reader users rely on properly written code to understand how to interact with forms. So, do these users get all the information they need to complete a form on the site?
How to test: [Sample Webpage] Click on the form field label. • Does the cursor move to the form field?
Use an online tool (e.g., WAVE) or a code inspector (e.g., built-in browser tools for developers) to check for proper markup. • Is the label associated with input field?
Use a screen reader (e.g., NVDA) and tab to each field. • Does the screen reader announce the field label?
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Issue #5: Alternative Text
8
Some users may not be able to see the images on a page.So, can these users understand the purpose of the images?
How to test: [Sample Webpage] Use a browser tool to display the alt text for all
images. • Does the alt text accurately yet succinctly describe
the purpose of the image? • Do decorative images have null alt text?
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Accessibility Best Practices to Increase Usability Communicate using plain language Mark up pages with a logical heading structure Include a Skip to Main Content link Use descriptive link text Use a style guide for consistent and accessible visual
design
9
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Conclusion
This is not an exhaustive list of accessibility issues. You can go further by: • Testing with assistive technologies • Conducting usability testing with people with
disabilities• Incorporating accessibility standards into heuristic
reviews
However, recognizing and addressing the issues discussed today will be a big step forward in designing a site that is usable by the widest audience possible.
10
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Resources
W3C’s Before and After Demonstration: http://www.w3.org/WAI/demos/bad/Overview.html
The Paciello Group Colour Contrast Analyser: http://www.paciellogroup.com/resources/contrastanalyser/
WAVE Web Accessibility Evaluation Tool: http://wave.webaim.org/
Firebug Extension for Firefox: https://addons.mozilla.org/en-US/firefox/addon/firebug/?src=ss
Firefox Web Developer Toolbar: https://addons.mozilla.org/en-US/firefox/addon/web-developer/
11
October 17, 2014
USER FOCUS 2014What Every UX Professional Should
Know About Web Accessibility
Questions?
Sarah Deighansarah.deighan@nextcentury
.com
12
Dana [email protected]
