How IA and Visual Design Decisions Impact Persons with Disabilities

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

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

3. How people with disabilities
access the web
CC Image courtesy of UNAMID Photo on Flickr

4. Types of Disabilities
Visual Includes vision loss, blindness,
color blindness
Hearing Includes diminished or partial
hearing, Deafness
Mobility Includes paralysis, fine motor
control, muscle fatigue, limb loss
Cognitive Includes dyslexia, autism,
ADD/ADHD

5. Assistive/Adaptive Technologies
Visual Screen reader, screen magnifer,
high contrast mode, Zoom,
enlarged text
Hearing Flashing light for system sounds
Mobility Voice recognition software,
different mouse or no mouse at
all
Cognitive Can use any combination of the
above

6. Learn by example
CC Image courtesy of saechang on Flickr

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

8. A B

9. A B

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

11. CC Image courtesy of Rolling F-Stop on Flickr
Lap One

12. A B

13. A B

14. 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 disabilities to lose their place
when moving to the next line.
Always have appropriate contrast and proper
justification.
Visual Cognitive

15. A B

16. A B

17. Q: Why is this more accessible?
A: People with a hearing impairment need text or
the audio content of a video is unavailable to
them.
Always provide captioning for videos.
Hearing

18. A B

19. A B

20. 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.
Visual

21. A B

22. A B

23. Q: Why is this more accessible?
A: For screen magnifier users, labels can be
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.
Visual

24. A B

25. A B

26. 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 (or 42px for touch targets).
Mobility

27. A B

28. A B

29. Q: Why is this more accessible?
A: Many screen reader users like to navigate by
links when interacting with a page. And for
those who can’t perceive that color, the
underline lets them distinguish the link text.
Links need to be determinable independent
of surrounding content.
Visual

30. A B

31. A B

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, or those using keyboard only, an
indication that focus is on a button can be really
helpful and save time.
Use some visual indication of focus.
Visual Mobility

33. A B

34. A B

35. Q: Why is this more accessible?
A: All users of assistive technology may take
longer to interact with pages than designers and
developers would anticipate.
Provide a warning before automatically
timing out a user (if time out is needed at all).
Visual CognitiveMobilityHearing

36. A B

37. A B

38. Q: Why is this more accessible?
A: For those with low vision or color blindness
who can’t perceive the differences in chart
colors, and screen reader users who can’t
access the chart unless summarized, provide
alternative ways of presenting the data.
Don’t rely on color alone to communicate
information and provide text alternatives for
non-text elements.
Visual

39. A B

40. A B

41. Q: Why is this more accessible?
A: If the sole purpose of the page is to interact with
the form, then it makes sense to a screen
reader user to place focus in the form field.
Otherwise the page loads with no context.
Interacting with form elements should be
standardized and predictable.
MobilityVisual

42. CC Image courtesy of eszter on Flickr
Extra Credit

43. A B

44. A B

45. 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.
Visual

46. A B

47. A B

48. Q: Why is this more accessible?
A: It is really difficult for a voice recognition user
to scroll when there are two vertical scroll bars
on a page.
It takes specific developer effort to make
modals/lightboxes accessible for screen
reader users.
MobilityVisual

49. CC Image courtesy of zzpza on Flickr
Resources

50. Tools you can use
Check color contrast
• many free Firefox browser plug-ins & sites available
• NoCoffee is a vision simulator for Chrome that
checks for contrast & other low vision personas
Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
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. A B

52. A B

53. A B

54. Tools you can use
Check color contrast
• many free Firefox browser plug-ins & sites available
• NoCoffee is a vision simulator for Chrome that
checks for contrast & other low vision personas
Check flow while magnified with:
• Windows Magnifier, or
• Apple Zoom
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

55. What We Learned
• Your content should be clear and
concise.
• Always have appropriate contrast and
proper justification.
• Always provide captioning for videos.
• For blocks of text more than a few
words, use true text instead of
images.
• Be mindful of proximity when
designing the layout of forms.

56. What We Learned
• Links (and other mouse targets) need
a space buffer, and should be more
than a few characters large (or 42px
for touch targets).
• Links need to be determinable
independent of surrounding content.
• Use some visual indication of focus.
• Provide a warning before
automatically timing out a user.

57. What We Learned
• Don’t rely on color alone to
communicate information and provide
text alternatives for non-text
elements.
• Interacting with form elements should
be standardized and predictable.
• Be careful with error message
handling.
• Be careful with modals/lightboxes.

58. CC Image courtesy of zzpza on Flickr
Questions?

59. Contact me
@novie
november.samnee@gmail.com