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

Accessibility&Design

C91cbe1acafcfc9b742f1b2acfd72226?s=47 Vishnu Reddy
December 06, 2020

 Accessibility&Design

C91cbe1acafcfc9b742f1b2acfd72226?s=128

Vishnu Reddy

December 06, 2020
Tweet

Transcript

  1. None
  2. DESIGN FOR EVERYONE

  3. DESIGN FOR EVERYONE

  4. Agenda • What is Accessible Design? • Why should you

    care? • What are the principles of accessibility? • Accessibility dos and don'ts for our focus groups. • How can I go about implementing accessibility in my designs?
  5. What is Accessibility? “Accessibility is the practice of making your

    websites usable by as many people as possible.”
  6. What is Accessible Design? “Combining accessibility standards and usability processes

    with real people ensures that web design is technically and functionally usable by people with disabilities”
  7. Accessible Design Vs Inclusive Design

  8. Accessibility Is One Outcome of Inclusive Design

  9. Why should you care?

  10. • It’s the right thing to do- The curb-cut effect

    • It’s the smart thing to do- SEO • Cost Savings • Legal Liabilities
  11. ADA Accessibility Lawsuits Trend-2020 Accessibility Is One Outcome of Inclusive

    Design Source: www.adatitleiii.com
  12. 4 Principles of Accessibility

  13. None
  14. WCAG Principles-POUR • Perceivable – Can it be perceived by

    more than one sense? • Operable – Can it be operated by more than one method? • Understandable – Is it obvious in its intended use or meaning? • Robust – How well does it fail?
  15. Introducing WCAG 2.1 • Accessibility Guidelines • Techniques • Related

    Docs ~150 Pages ! https://www.w3.org/TR/WCAG21/
  16. None
  17. Design Tips on Accessibility

  18. Don’t use color alone to convey information • Make Sure

    that information conveyed by color differences is also available in text. • Try to use an indicator other than color such as text labels or patterns. • 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
  19. Use of color Example

  20. Possible Solution

  21. Provide Sufficient Contrast • Provide enough contrast between text and

    background colors • To achieve conformance level AA, it is recommended that the contrast ratio between text and its background is at least 4.5 to 1 • 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
  22. Poor Contrast Example: Its Illegible, Undiscoverable, Inaccessible

  23. Provide strong Visual focus indicators • Focus indicators are visual

    markers which show (indicate) which element on a web page is focused • A rule of thumb: if you can interact with an element with the mouse, you should also be able to use the keyboard to perform the same actions • If you’re using a keyboard, anything you interact with should have visible focus.
  24. Focus indicator Examples

  25. Be careful with forms • Ensure Forms should be logical,

    labeled correctly, keyboard operable and consistent • Placeholder text is not a suitable label and should never be used in the place of visual label • Allow user to review the information before submitting the form • Required form fields can be indicated in a variety of ways, but the method used must be perceivable with various senses.
  26. Bad Form Example

  27. Good Form Example Comment

  28. Provide easily identifiable feedback • Provide feedback for interactions, such

    as form confirming form submission • Instructions should be easy to identify • Feedback(Error messages) should be presented in prominent way
  29. Errors placement example

  30. • Enabling Access and Improving Usability for All • Expanded

    Customer Base • Cost Savings • Positive Public Perception
  31. None