A discussion on accessibility tips for the UX Professional from User Focus 2014 in Washington DC

1. What Every UX Professional
Should Know About Web
Accessibility
Dana Douglas, UserWorks, Inc.
Sarah Deighan, Next Century Corp.
1

2. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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

3. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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

4. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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?

5. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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?

6. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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?

7. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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?

8. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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?

9. Accessibility Best Practices to Increase Usability
USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
 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

10. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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

11. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
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

12. USER FOCUS 2014
What Every UX Professional Should
Know About Web Accessibility
October 17, 2014
Questions?
Sarah Deighan
sarah.deighan@nextcentury.co
m
12
Dana Douglas
ddouglas@userworks.com