Designing with Accessibility in Mind: How IA and Visual Design Decisions Impact Persons with Disabilities
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 370 views

 

Statistics

Views

Total Views
370
Views on SlideShare
367
Embed Views
3

Actions

Likes
1
Downloads
6
Comments
0

1 Embed 3

http://eventifier.co 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. Designing with Accessibility (#a11y)in Mind: How IA and Visual Design DecisionsImpact Persons with DisabilitiesNovember M. Samnee@novieManager, Product DevelopmentThomson 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 MelvilleHow people with disabilitiesaccess 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/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. 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 HodelLearn by Example 9
  • 10. CC Image courtesy of .m for matthijs on FlickrPractice 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. 13CC 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 wont begraded) 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 FlickrResources 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 47CC 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 56CC Icons courtesy of Andres Antonio