No content

DESIGN FOR EVERYONE

DESIGN FOR EVERYONE

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?

What is Accessibility? “Accessibility is the practice of making your websites usable by as many people as possible.”

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”

Accessible Design Vs Inclusive Design

Accessibility Is One Outcome of Inclusive Design

Why should you care?

● It’s the right thing to do- The curb-cut effect ● It’s the smart thing to do- SEO ● Cost Savings ● Legal Liabilities

ADA Accessibility Lawsuits Trend-2020 Accessibility Is One Outcome of Inclusive Design Source: www.adatitleiii.com

4 Principles of Accessibility

No content

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?

Introducing WCAG 2.1 • Accessibility Guidelines • Techniques • Related Docs ~150 Pages ! https://www.w3.org/TR/WCAG21/

No content

Design Tips on Accessibility

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)

Use of color Example

Possible Solution

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)

Poor Contrast Example: Its Illegible, Undiscoverable, Inaccessible

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.

Focus indicator Examples

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.

Bad Form Example

Good Form Example Comment

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

Errors placement example

● Enabling Access and Improving Usability for All ● Expanded Customer Base ● Cost Savings ● Positive Public Perception

No content