1. Designing with Accessibility (#a11y)
in Mind: How IA and Visual Design Decisions
Impact Persons with Disabilities
November M. Samnee
@novie
Manager, Product Development
Thomson Reuters 1

2. What we’re doing today
• Review of how people with disabilities
access the web
• Learn by example:
– Presented with two options of design treatments
– You make a choice
– We discuss which is the most accessible, and why
• Review of tools you can use to help make
your designs more accessible
2

3. Credit: Reuters/Toby Melville
How people with disabilities
access the web 3

4. Types of Disabilities
Visual Vision Loss, Blindness, Color-
Blindness
Hearing Diminished or partial hearing,
Deafness
Mobility Muscle fatigue/weakness, fine motor
control, paralysis
Cognitive Dyslexia, Autism, ADD/ADHD
4

5. No Vision/Blindness
Assistive Technologies
• Screenreader (reads aloud
what’s on the screen)
– Can be free: NVDA,
VoiceOver (for Apple
products)
– Or Expensive: JAWS,
WindowEyes
• May be used in conjunction
with a refreshable Braille
display
5

6. Low Vision Assistive
Technologies
• Have many options:
– Screen Magnifiers/Zooming
• Can be part of the OS
• Or Expensive: ZoomText,
WinZoom, MAGic
– High-contrast mode
– May use a high-contrast
keyboard
• Or may use nothing
6

7. Mobility Assistive Technologies
• May use voice
recognition software,
like Dragon
• And/or different
keyboards or mice
7

8. Cognitive Assistive Technologies
• Can use voice
recognition or screen
reading software
• May use custom CSS
to control web page
presentation
8

9. Credit: Reuters/Thomas Hodel
Learn by Example
9

10. CC Image courtesy of .m for matthijs on Flickr
Practice Round
10

11. A B
11

12. A B
12

13. Q: Why is this more accessible?
A: Many screen reader users like to pull
up links lists when viewing a page.
Links need to be determinable
independent of surrounding content.
13
CC Icon courtesy of Icons Land

14. A B
14

15. A B
15

16. Q: Why is this more accessible?
A: The more advanced the language, the
more difficult it is for some people with
cognitive issues to understand the
intent of your web content.
Your content should be clear and
concise.
16

17. Round 1
(no, this won't be
graded)
17

18. A B
18

19. A B
19

20. Q: Why is this more accessible?
A: For those people with a vision
impairment who can’t perceive the
shade you selected, the underline lets
them determine that the link text is
different than the surrounding text.
Don’t rely on color alone to
communicate information.
20

21. A B
21

22. A B
22

23. Q: Why is this more accessible?
A: For screen magnifier users, labels
are hard to match up. When they are
far from the corresponding field they
may not show up on their screen.
Be mindful of proximity when
designing the layout of forms.
23

24. A B
24

25. A B
25

26. Q: Why is this more accessible?
A: People with limited hearing need text
or the audio content of a video is
unavailable to them (plus, the
services that do captioning are pretty
cheap).
Always provide captioning for videos.
26

27. A B
27

28. A B
28

29. Q: Why is this more accessible?
A: Many shades of gray are not readable
to people with low vision (or even
those of a certain age).
Full or right justification can cause
some people with cognitive issues to
lose their place when moving to the
next line.
Always have appropriate contrast and
proper justification. 29

30. A B
30

31. A B
31

32. Q: Why is this more accessible?
A: When targeting a mouse pointer with
voice recognition software, or with
an enlarged cursor sometimes used
by people with low vision, an
indication that focus is on a button
can be really helpful and save time.
Use some visual indication of focus.
32

33. A B
33

34. A B
34

35. Q: Why is this more accessible?
A: Screen reader users need alternative
text for images with text, and people
with low vision can have trouble with
imaged text – when enlarged, it can
become pixilated.
For blocks of text more than a few
words, use true text instead of
images.
35

36. A B
36

37. A B
37

38. Q: Why is this more accessible?
A: Some with mobility impairments can
have trouble isolating small links.
Links (and other mouse targets) need
a space buffer, and should be more
than a few characters large.
38

39. Extra Credit
(i.e. this isn’t
just UX)
39

40. A B
40

41. A B
41

42. Q: Why is this more accessible?
A: For those using screen magnification,
it can be disconcerting for focus to go to
a completed form field when the error
message isn’t nearby.
It takes specific developer techniques to
get the error message to read for
screen reader users.
42

43. A B
43

44. A B
44

45. Q: Why is this more accessible?
A: It is difficult (if not nearly impossible) for
a voice recognition user to scroll when
there are two scrollable areas on a
page.
It takes special developer effort to
make lightboxes accessible for users of
screen readers.
45

46. CC Image courtesy of zzpza on Flickr
Resources
46

47. Tools you can use
Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
 Check color contrast
• many free Firefox browser plug-ins available (I use ColorZilla, and
WebAim’s site)
• NoCoffee is a vision simulator for Chrome that checks for contrast &
other low vision personas
 Check the readability of your content
• Turn on the checker in MS Word
• Use the readability bookmarklet produced by NC State University’s IT
Accessibility department
47
CC Icon courtesy of Keyamoon

48. A B
48

49. Tools you can use
 Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
Check color contrast
• many free Firefox browser plug-ins available
(I use ColorZilla, and WebAim’s site)
• NoCoffee is a vision simulator for Chrome
that checks for contrast & other low vision
personas
 Check the readability of your content
• Turn on the checker in MS Word
• Use the readability bookmarklet produced by NC State University’s IT 49
Accessibility department

50. A B
50

51. Tools you can use
 Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
 Check color contrast
• many free Firefox browser plug-ins available (I use ColorZilla, and
WebAim’s site)
• NoCoffee is a vision simulator for Chrome that checks for contrast &
other low vision personas
Check the readability of your content
• Turn on the checker in MS Word
• Use the readability bookmarklet
produced by NC State University’s IT
Accessibility department 51

52. A B
52

53. Tools you can use
Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
Check color contrast
• many free Firefox browser plug-ins available (I use
ColorZilla, and WebAim’s site)
• NoCoffee is a vision simulator for Chrome that checks for
contrast & other low vision personas
Check the readability of your content
• Turn on the checker in MS Word
• Use the readability bookmarklet produced by NC State
University’s IT Accessibility department
53

54. What We Learned
• Links need to be determinable independent of
surrounding content.
• Your content should be clear and concise.
• Don’t rely on color alone to communicate
information.
• Be mindful of proximity when designing the layout
of forms.
• Always provide captioning for videos.
• Always have appropriate contrast and proper
justification.
54

55. What We Learned
• Use some visual indication of focus.
• For blocks of text more than a few words, use true
text instead of images.
• Links (and other mouse targets) need a space
buffer, and should be more than a few characters
large.
• Be careful with error message handling.
• Be careful with lightboxes/modal dialogs.
55

56. Questions?
@novie
november.samnee@
gmail.com
56
CC Icons courtesy of Andres Antonio