Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility - Learn how to get your whole team involved

Accessibility - Learn how to get your whole team involved

966298ba70519e928011b104295be616?s=128

Michaela Blackham

August 03, 2017
Tweet

Transcript

  1. Accessibility Learn how to get your whole team involved MICHAELA

    BLACKHAM
  2. Michaela
 Blackham FRONT-END DEVELOPER

  3. @atendesign aten.io

  4. Work That
 Matters

  5. Work That
 Matters

  6. Accessibility Learn how to get your whole team involved

  7. None
  8. What is the problem?

  9. 53 million adults live with some form of a disability

    in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
  10. That’s 1 in every 5 adults in the USA —

    CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
  11. None
  12. What is accessibility? Easy to obtain, use and understand.

  13. P O U R

  14. P: Perceivable O U R

  15. P: Perceivable O: Operable U R

  16. P: Perceivable O: Operable U: Understandable R

  17. P: Perceivable O: Operable U: Understandable R: Robust

  18. P: Perceivable O: Operable U: Understandable R: Robust

  19. P: Perceivable O: Operable U: Understandable R: Robust

  20. P: Perceivable O: Operable U: Understandable R: Robust

  21. P: Perceivable O: Operable U: Understandable R: Robust

  22. needs an accessible website? Who

  23. Everyone benefits from an accessible website.

  24. There are 4 main categories

  25. Visual Motor or Physical Auditory Cognitive

  26. Visual Motor or Physical Auditory Cognitive

  27. What does this mean? • Someone with low, obstructed, or

    constricted vision • My color blind father • Each of our aging grandparents VISUAL
  28. None
  29. None
  30. None
  31. • Navigation • Visual content • Orientation & boundaries •

    Contrast & size • Peripheral interaction What should I look for? VISUAL
  32. • Design • Keyboard navigation • Screen readers How is

    this solved? VISUAL
  33. Visual Motor or Physical Auditory Cognitive

  34. • Someone like my cousin Emily, with a disability from

    birth • The wounded vet that uses prosthetics • Or even my niece with her broken arm or finger What does this mean? MOTOR OR PHYSICAL
  35. • Gesture alternatives & sensitivity touches • Reach/orientation on mobile

    • Non physical navigation What should I look for? MOTOR OR PHYSICAL
  36. • Keyboard or touch navigation • Speech • Eye trackers,

    tongue sensitivity clickers etc How is this solved? MOTOR OR PHYSICAL
  37. Visual Motor or Physical Auditory Cognitive

  38. • Someone who is completely non hearing • My grandfather

    who wears a hearing aid What does this mean? AUDITORY
  39. • Embedded videos • Alternative contact information What should I

    look for? AUDITORY
  40. • Closed captioning & transcripts • Alternative communication How is

    this solved? AUDITORY
  41. Visual Motor or Physical Auditory Cognitive

  42. • My cousin Matthew who has down syndrome • The

    little boy I babysit with autism • Your friend who may have dyslexia • Me with extreme motion sickness What does this mean? COGNITIVE
  43. • Visual density • Memory gestures • Distracting content •

    Fonts • Excessive movements What should I look for? COGNITIVE
  44. • K.I.S.S. • Clear & consistent layouts • Smart color

    palettes • Controllable interactions • Subtle movements How is this solved? COGNITIVE
  45. Where are we today?

  46. Not awful, but not great.

  47. There are so many devices

  48. Where can I start?

  49. Accessibility takes a full team

  50. Project managers

  51. Make accessibility a priority from the beginning PROJECT MANAGERS

  52. Educate the client PROJECT MANAGERS

  53. Content creators

  54. Include meaningful alternative (alt) text for 
 all visuals CONTENT

    CREATORS
  55. Headings to organize structure and content CONTENT CREATORS

  56. Descriptive link text CONTENT CREATORS

  57. Provide captions, transcripts and descriptions for media CONTENT CREATORS

  58. Designers

  59. Content first DESIGNERS

  60. Be mindful of typography DESIGNERS

  61. Provide good contrast for colorblindness and low vision DESIGNERS

  62. None
  63. None
  64. None
  65. None
  66. Don’t rely on color only, to show distinctions DESIGNERS

  67. None
  68. None
  69. Create clear and intuitive layouts DESIGNERS

  70. None
  71. Critique Critique Critique DESIGNERS

  72. Developers

  73. Use semantic markup for hierarchy & structure DEVELOPERS

  74. None
  75. Pay special attention to markup on forms DEVELOPERS

  76. None
  77. Capture content creators needs DEVELOPERS

  78. Enable keyboard navigation DEVELOPERS

  79. Include ARIA attributes (Accessible Rich Internet Applications) DEVELOPERS

  80. Quality assurance testers

  81. Computers aren’t humans QUALITY ASSURANCE TESTERS

  82. your heart into it! P.O.U.R

  83. Thanks! michaela@aten.io Michaela Blackham /

  84. Resources • The A11Y Project: a11yproject.com • Simply Accessible: simplyaccessible.com

    • Web Aim: webaim.org
 Color Testing • Color contrast: webaim.org/resources/ contrastchecker/ • Spectrum Chrome extension • Stark Sketch Plugin: getstark.co Screen Readers (free) • Safari Voicebox (built in) • Chromevox Chrome extension • NVDA (windows): nvaccess.org Transcribing media files (free) • Transcribe Chrome extension Accessibility checker • wave.webaim.org/