Accessibility&Design

Transcript

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
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/
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