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

Accessible By Design

Tim Knight
September 15, 2018

Accessible By Design

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

Tim Knight

September 15, 2018
Tweet

More Decks by Tim Knight

Other Decks in Design

Transcript

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

    Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com
  2. “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
  3. 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
  4. “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
  5. “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
  6. 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
  7. 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
  8. 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)
  9. 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)
  10. 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
  11. Make it clear to the user where they are, where

    they’ve been, and what their options are. State
  12. 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)