Introducing Web Accessibility. Presentation for MAP TechWorks (http://www.maptechworks.com) by Joe Dolson and Crystal Colby Mulry, July 2014.

1. Mission: Accessible
#npa11y
Share & Connect Online with Everybody!

2. MAP and MAP TechWorks
• Consulting and training for nonprofit, social
enterprise and philanthropic organizations
• MAP TechWorks is our nonprofit technology
learning and networking community
• Free and low cost workshops,
email support group, and
video interviews at www.maptechworks.org.

3. What is web accessibility?
Interface independence:
Content is not dependent on the tools used to
access it.

4. What is accessibility?
None of these should be required on a website:
● Keyboards
● Mice
● Monitors
● Desktop computers

5. Who does it benefit?
● People with vision disabilities
● Deaf and Hard of Hearing users
● Color-blind users
● Users with cognitive impairments
● Users with mobility impairments

6. Who does it benefit?
Accessibility helps everyone.
● Users of smart phones and tablets
● Users in brightly lit rooms
● Impatient users
● You. Me.

7. Do I need an accessible site?
Yes.
It’s the law.
It helps SEO.
Above all, it’s the right thing to do.

8. Who defines “accessible”?
Accessibility on the web is a wild and wooly
place:
● Mostly unprotected by law
● Different solutions for different disabilities
● Filled with contradictory and confusing
information

9. Who defines “accessible”?
Much of accessibility is subjective
(to the user, not you).
Know what’s testable and objective.

10. What level do I need?
Standards have diverse measurements;
different users have different needs.
Do everything you can reasonably afford to do.

11. Test: Keyboard navigation
How: unplug your mouse.
Can you navigate to every link using the tab
key?
Can you tell where you are?

12. Test: Keyboard navigation
1) Tab
2) Look

13. “Skip to content” links
● Who are these for?
● What does it do?

14. Quick Fix: Keyboard accessibility
● Most problems come from styles
● Search your stylesheet; find a:hover
● Replace with a:hover, a:focus

15. Test: Alt text
Alt text is a text alternative for non-text content
(such as images)
Turn your browser’s images off.
Is there any information missing?

16. Alt text
“Adding alternative text for images is the first
principle of web accessibility. It is also one of
the most difficult to properly implement.”
- WebAIM (Accessibility in Mind)

17. Alt text
True or false:
Every image requires alt text.
False.

18. Alt text: is it needed?
Is the image
decorative or
essential?
If image is
decorative, use alt=""

19. Alt text: is it needed?
If the content of
the image is
described in
surrounding text,
such as a caption,
you might choose
to use alt=""

20. Alt Text
What words to use?
What is the image’s content?
What is its function?

21. Alt Text
If an image is a link, it has to have alt text.
If it doesn’t have alt text, it’s not clear what the
screen reader will do.

22. Alt Text Examples
Image displayed
http://www.mnhs.org/

23. Alt Text Examples
Image not displayed
http://www.mnhs.org/

24. Alt Text Examples
Image not displayed; better alt text
http://www.mnhs.org/

25. Alt Text Examples
Ad with image displayed
http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free-
concert-series-begins-january-5/

26. Alt Text Examples
Ad with images off: no info.
But the text doesn’t require design.
The only things that are design are the
background (which could be just color)
and the image at the bottom.
http://www.comozooconservatory.org/news/music-under-glass-line-up-annnounced-8-week-free-
concert-series-begins-january-5/

27. Alt Text Examples
Infographic with
image displayed
http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics

28. Alt Text Examples
Infographic with
images off:
What should they have done?
http://www.nonprofitmarketingblog.com/comments/free_webinar_learn_all_about_infographics

29. Quick Fix: Alt Text
Sometimes, it’s not obvious.
Don’t forget email!
Prioritize. What are the consequences for not
fixing?

30. Test: Check Color Contrast
Scan site:
● Juicy Studio Color Contrast Analyser
● WebAIM WAVE tool

31. Test: Check Color Contrast
Firefox add-on: WCAG Contrast Checker

32. Spot Check Color Contrast
Firefox: colorPicker add-on
Chrome: Native element inspector
Numerous applications for your operating
system.

33. Solving Color Contrast Problems
Get suggestions: http://contrast-
finder.tanaguru.com
Test color combinations:
https://joedolson.com/tools/color-contrast.php

34. Test: Video Accessibility
Captions: text version of spoken words and
sounds

35. Video Accessibility
YouTube’s auto
captions:
Always review them!
Tip: use auto captions
for time points, then
revise

36. Video Accessibility
Audio description: not the same as captions.
Audio descriptions are needed for users with
visual disabilities when the audio track isn’t
enough.

37. Video Accessibility
Audio descriptions:
Narrator describes what is happening.
http://youtu.be/yuh35uYxQJU

38. Video Accessibility
Test the player you’ll be using
● on YouTube ≠ embedded on your site
● Check keyboard accessibility
● Check caption support

39. Form Labeling
Forms have two key parts: inputs and labels
● Every input must have a label
● Every label must be explicitly connected to
an input

40. Form Labeling
The screen reader experience is hugely
affected by missing labels.

41. Form Labeling: No Labels

42. Form Labeling: Correctly Labeled

43. Form Labeling Test
Keyboard test:
Click on the label, then start typing.
http://dev.joedolson.com/form-good.html
http://dev.joedolson.com/form-bad.html

44. Fix: Inclusive Content
Skimmable content? No.

45. Inclusive Content
Skimmable content?
Yes.
http://opportunities.org/program-referrals/residential-options/

46. Inclusive Content
Meaningful link text? No.

47. Quick Fix: Open in New Window
Check for and remove:
target="blank"
Exception: when interrupting a task would
interfere with completion.

48. Inclusive Content
Color should not be your
only way to convey info

49. Inclusive Content
● Avoid locationally driven text such as “see
the image at the right”
● Use clear language
● Be aware of acronyms and abbreviations
● Use all-CAPS sparingly

50. Summary
It is subjective.
It is time-consuming.
Prioritize.
It will never be perfect. But you can get closer.
Knowing the issues is more than half the battle.

51. Questions?
Joe Dolson
joedolson.com
@joedolson
Crystal Colby Mulry
@ccolby

52. Accessibility Resources
Accessibility is a mindset, not a checklist
WebAIM: Simplified summaries,
recommendations. Extensive documentation on
almost every accessibility topic:
http://webaim.org

53. Accessibility Resources
WCAG Recommended Techniques: highly
technical, though simpler than the WCAG itself.
http://www.w3.org/TR/WCAG-TECHS/
University of Minnesota, Duluth Web Design
References: Extensive curated catalog of
accessibility articles on the web:
http://bit.ly/t3tPZC