Designing with Accessibility (#a11y)in Mind: How IA and Visual Design DecisionsImpact Persons with DisabilitiesNovember M....
What we’re doing today• Review of how people with disabilities  access the web• Learn by example:  – Presented with two op...
Credit: Reuters/Toby MelvilleHow people with disabilitiesaccess the web                                            3
Types of Disabilities  Visual      Vision Loss, Blindness, Color-              Blindness   Hearing    Diminished or partia...
No Vision/BlindnessAssistive Technologies               • Screenreader (reads aloud                 what’s on the screen) ...
Low Vision Assistive    Technologies• Have many options:  – Screen Magnifiers/Zooming     • Can be part of the OS     • Or...
Mobility Assistive Technologies                   • May use voice                     recognition software,               ...
Cognitive Assistive Technologies• Can use voice  recognition or screen  reading software• May use custom CSS  to control w...
Credit: Reuters/Thomas HodelLearn by Example                                            9
CC Image courtesy of .m for matthijs on FlickrPractice Round                                                         10
A   B        11
A   B        12
Q: Why is this more accessible?                        A: Many screen reader users like to pull                           ...
A   B        14
A   B        15
Q: Why is this more accessible?    A: The more advanced the language, the       more difficult it is for some people with ...
Round 1(no, this wont begraded)                 17
A   B        18
A   B        19
Q: Why is this more accessible?    A: For those people with a vision       impairment who can’t perceive the       shade y...
A   B        21
A   B        22
Q: Why is this more accessible?    A: For screen magnifier users, labels       are hard to match up. When they are       f...
A   B        24
A   B        25
Q: Why is this more accessible?    A: People with limited hearing need text       or the audio content of a video is      ...
A   B        27
A   B        28
Q: Why is this more accessible?    A: Many shades of gray are not readable       to people with low vision (or even       ...
A   B        30
A   B        31
Q: Why is this more accessible?    A: When targeting a mouse pointer with       voice recognition software, or with       ...
A   B        33
A   B        34
Q: Why is this more accessible?    A: Screen reader users need alternative       text for images with text, and people    ...
A   B        36
A   B        37
Q: Why is this more accessible?    A: Some with mobility impairments can       have trouble isolating small links.      Li...
Extra Credit(i.e. this isn’t just UX)                   39
A   B        40
A   B        41
Q: Why is this more accessible?    A: For those using screen magnification,       it can be disconcerting for focus to go ...
A   B        43
A   B        44
Q: Why is this more accessible?    A: It is difficult (if not nearly impossible) for       a voice recognition user to scr...
CC Image courtesy of zzpza on FlickrResources                                            46
Tools you can use          Check flow while magnified with:               • Windows Magnifier, or               • Apple Z...
A   B        48
Tools you can use Check flow while magnified with:   •   Windows Magnifier, or   •   Apple ZoomCheck color contrast   • ...
A   B        50
Tools you can use Check flow while magnified with:   •   Windows Magnifier, or   •   Apple Zoom Check color contrast   •...
A   B        52
Tools you can useCheck flow while magnified with:  • Windows Magnifier, or  • Apple ZoomCheck color contrast  • many fre...
What We Learned• Links need to be determinable independent of  surrounding content.• Your content should be clear and conc...
What We Learned• Use some visual indication of focus.• For blocks of text more than a few words, use true  text instead of...
Questions?                                      @novie                                      november.samnee@              ...
Upcoming SlideShare
Loading in …5
×

Designing with Accessibility in Mind: How IA and Visual Design Decisions Impact Persons with Disabilities

472 views

Published on

Published in: Technology, Health & Medicine
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
472
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Designing with Accessibility in Mind: How IA and Visual Design Decisions Impact Persons with Disabilities

  1. 1. Designing with Accessibility (#a11y)in Mind: How IA and Visual Design DecisionsImpact Persons with DisabilitiesNovember M. Samnee@novieManager, Product DevelopmentThomson Reuters 1
  2. 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. 3. Credit: Reuters/Toby MelvilleHow people with disabilitiesaccess the web 3
  4. 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. 5. No Vision/BlindnessAssistive 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. 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. 7. Mobility Assistive Technologies • May use voice recognition software, like Dragon • And/or different keyboards or mice 7
  8. 8. Cognitive Assistive Technologies• Can use voice recognition or screen reading software• May use custom CSS to control web page presentation 8
  9. 9. Credit: Reuters/Thomas HodelLearn by Example 9
  10. 10. CC Image courtesy of .m for matthijs on FlickrPractice Round 10
  11. 11. A B 11
  12. 12. A B 12
  13. 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. 13CC Icon courtesy of Icons Land
  14. 14. A B 14
  15. 15. A B 15
  16. 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. 17. Round 1(no, this wont begraded) 17
  18. 18. A B 18
  19. 19. A B 19
  20. 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. 21. A B 21
  22. 22. A B 22
  23. 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. 24. A B 24
  25. 25. A B 25
  26. 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. 27. A B 27
  28. 28. A B 28
  29. 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. 30. A B 30
  31. 31. A B 31
  32. 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. 33. A B 33
  34. 34. A B 34
  35. 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. 36. A B 36
  37. 37. A B 37
  38. 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. 39. Extra Credit(i.e. this isn’t just UX) 39
  40. 40. A B 40
  41. 41. A B 41
  42. 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. 43. A B 43
  44. 44. A B 44
  45. 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. 46. CC Image courtesy of zzpza on FlickrResources 46
  47. 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 47CC Icon courtesy of Keyamoon
  48. 48. A B 48
  49. 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. 50. A B 50
  51. 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. 52. A B 52
  53. 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. 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. 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. 56. Questions? @novie november.samnee@ gmail.com 56CC Icons courtesy of Andres Antonio

×