Accessible By Design

2722012beb9afcad75df5c9f2229fd8c?s=47 Tim Knight
September 15, 2018

Accessible By Design

An introduction to accessibility guidelines and a look at how to design accessible UI components.

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

September 15, 2018
Tweet

Transcript

  1. Accessible by Design with Tim Knight

  2. Hi! I’m Tim Knight Director User Experience @ GravityFree Studios

    Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com
  3. “I’m not a lawyer and not the person you want

    interpreting the law for you, but I can tell you how to make better digital products.” Tim Knight The guy on the stage right now
  4. Looking at Today • The roles of the ADA, Section

    508, and WCAG on modern accessibility design • Changing our view on accessibility • Technology won’t save poor design: designing CRiSP • Designing components to be individually accessible • Think outside the structure • Accessibility testing tools that I love • Things you should read
  5. The Legal Stuff

  6. We’re Not Going Into Detail on This

  7. “Federal procurement law requires that [Interactive transaction machines] purchased by

    the Federal government comply with standards issued by the Access Board under Section 508 of the Rehabilitation Act of 1973, as amended.” Section 707 of The American’s with Disability Act http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
  8. “Federal procurement law requires that [Interactive transaction machines] purchased by

    the Federal government comply with standards issued by the Access Board under Section 508 of the Rehabilitation Act of 1973, as amended.” Section 707 of The American’s with Disability Act http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
  9. If your company receives federal funding, current court rulings are

    starting to set precedent that this could include you too. Don’t Get Too Excited
  10. WCAG • Perceivable - Information and user interface components must

    be presentable to users in ways they can perceive. • Operable - User interface components and navigation must be operable. • Understandable - Information and the operation of user interface must be understandable. • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Web Content Accessibility Guidelines
  11. Changing Our View

  12. This is about creating products everyone can use.

  13. “We’re all just temporarily abled.” Cindy Li Freelance Designer, Previously

    with Yahoo!
  14. You wouldn’t make a website that wasn’t responsive would you?

  15. Designing CRiSP

  16. The visual presentation of text and images of text should

    have a contrast ratio of at least 4.5:1 Large-scale text and images of large-scale text should have a contrast ratio of at least 3:1 (14pt and bold or larger, or 18pt or larger) Contrast (AA)
  17. The visual presentation of text and images of text should

    have a contrast ratio of at least 7:1 Large-scale text and images of large-scale text should have a contrast ratio of at least 4.5:1 (14pt and bold or larger, or 18pt or larger) Contrast (AAA)
  18. Contrast (for Mac) https://usecontrast.com

  19. Contrast Analyser for Sketch https://github.com/getflourish/Sketch-Color-Contrast-Analyser

  20. Color Contrast Checker http://webaim.org/resources/contrastchecker/

  21. Alerting with blinking, shaking, or other techniques that “flash” an

    item on the screen should not flash that item more than 3 times per second to reduce the chance of seizures. Refresh Rate
  22. Make it clear to the user where they are, where

    they’ve been, and what their options are. State
  23. State

  24. State Pressing tab on BBC let’s you access accessibility features.

  25. None
  26. Avoid extended cognitive load to decipher the meaning of abstract

    images or complicated text. Perception (Yes, there’s probably a simple way I could have said that)
  27. Accessible Components

  28. Buttons

  29. Links

  30. Cards

  31. Card: Alt Attributes

  32. Card: Embrace Your Focus Ring

  33. Icon Links Lists

  34. Icon Links Lists

  35. Forms

  36. One option…

  37. None
  38. Buttons Menus & Toggling State

  39. Buttons Menus & Toggling State

  40. Tab Trapping

  41. None
  42. None
  43. None
  44. None
  45. None
  46. Thinking outside the document structure

  47. Subtitle Workshop XE http://www.uruworks.net/

  48. Aegisub http://www.aegisub.org/

  49. YouTube https://www.youtube.com

  50. Using Subtitle with HTML5 Video

  51. Testing Tools I Love

  52. Chrome DevTools / Lighthouse

  53. Chrome DevTools / Lighthouse

  54. aXe https://www.deque.com/axe/

  55. pa11y https://github.com/pa11y/pa11y

  56. Learning More

  57. Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone

  58. A Web for Everyone https://rosenfeldmedia.com/books/a-web-for-everyone/

  59. Accessibility Handbook http://shop.oreilly.com/product/0636920024514.do

  60. Inclusive Components http://book.inclusive-components.design/

  61. The a11y Project https://a11yproject.com/

  62. Questions?

  63. thank you. Tim Knight iamtimknight.com Find this and other talks

    at https://speakerdeck.com/timknight