Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Fundamentals of Accessible Web Design

775 views

Published on

The Web Content Accessibility Guidelines (WCAG) help developers, content writers, designers, and other web professionals create web experiences that everyone can use and enjoy.

In this presentation, you'll get a basic understanding of what the WCAG technical standards are and why they're important.

Published in: Design
  • Be the first to comment

  • Be the first to like this

The Fundamentals of Accessible Web Design

  1. 1. the fundamentals of accessible web design
  2. 2. What is web accessibility? The Web Content Accessibility Guidelines (WCAG) are a set of legal guidelines that cover many different disciplines, including design, to help ensure that the web is usable and accessible to everyone. The WCAG have three levels of compliance: 01The Fundamentals of Accessible Web DesignBranding Brand • A (lowest level of compliance) • AA • AAA (highest level of compliance)
  3. 3. Who benefits from web accessibility? Everyone! Most of all, it helps individuals with temporary or permanent disabilities, including but not limited to: • Blindness • Low vision • Deafness • Hearing loss • Cognitive limitations • Limited movement • Speech disabilities • Photosensitivity 02The Fundamentals of Accessible Web DesignBranding Brand
  4. 4. Why web accessibility is important It's part of the law and is enforced by the U.S. Department of Justice (DOJ). 03The Fundamentals of Accessible Web DesignBranding Brand State of web accessibility in 2016: State of web accessibility in 2018: State and local government websites must adhere to web accessibility guides. All private websites must adhere to Title III web accessibility guides. Resources: Americans with Disabilities Act (ADA) Title II Regulations Americans with Disabilities Act (ADA) Title III Regulations Section 508 of the Rehabilitation Act, §1194.22
  5. 5. Case study: Target By not adhering to standards, disabled users are being discriminated against, and legal action may be taken. Resource: Cautionary Tale of Inaccessibility: Target 04The Fundamentals of Accessible Web DesignBranding Brand NFB v. Target: • National Federation of the Blind (NFB) notified Target its site was not accessible to the blind and visually impaired. • After no remedying action was taken after 7 months, NFB brought a class-action lawsuit against Target. • Target settled and paid damages of $6 million.
  6. 6. Designing for web accessibility To meet the minimum WCAG compliance, designers should focus on the following criteria: 05The Fundamentals of Accessible Web DesignBranding Brand • Color • Contrast • Text • User Location • Focus states • Labels & Fields • Information Organization • Playback • Contingencies Resource: Web Content Accessibility Guidelines Overview
  7. 7. • • • • Color Do: Don't: 06The Fundamentals of Accessible Web DesignBranding Brand Link or Link > Name (required) Link *Name Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. There should be additional visual cues for any element where you would only use color to indicate that it is interactive.
  8. 8. Contrast 07The Fundamentals of Accessible Web DesignBranding Brand The contrast ratio between text and a text’s background should be at least 4.5:1. If your font is at least 24px or 19px bold, the minimum drops to 3:1. Resources: Color Safe WebAIM
  9. 9. Text 08The Fundamentals of Accessible Web DesignBranding Brand Images of text should not be used unless they are for pure decoration and non-essential to the user. Line spacing (i.e., leading) must be at least 1.5 within paragraphs, and paragraph spacing is at least 1.5x larger than the line spacing. Text should not be all caps nor should it be justified (i.e., aligned to both right and left margins).
  10. 10. • Using breadcrumbs • Providing a site map • Indicating current location within navigation bars User location 09The Fundamentals of Accessible Web DesignBranding Brand Users need to understand where they are within a website at all times. Acceptable ways of adhering to this guideline include:
  11. 11. • Gives users navigating via keyboard feedback that an element is selected • Gives users visual feedback as to what element they are currently manipulating Focus The Fundamentals of Accessible Web DesignBranding Brand Elements, such as form fields, should have a focus state that: 10
  12. 12. Labels & fields The Fundamentals of Accessible Web DesignBranding Brand All fields should have a permanent label outside of the input that does not disappear as well as clearly defined boundaries. Error states should be defined with a symbol and text explaining what the error is. Suggestions for how to fix the error should be given to the user in text form. 11
  13. 13. Information organization The Fundamentals of Accessible Web DesignBranding Brand Use headers to organize and group related information. Reading order should match the visual order. 12
  14. 14. Playback The Fundamentals of Accessible Web DesignBranding Brand No elements should autoplay and those with playback should have a mechanism to stop or pause. This applies to video and audio content as well as image carousels. Banner carousels should not automatically rotate. They should instead utilize arrow controls. 13
  15. 15. Contingencies 14The Fundamentals of Accessible Web DesignBranding Brand Prior to submitting a form, provide a review page where users can review and edit any input they have provided. Following a form submission, provide a confirmation page and instructions on making any additional changes to the information provided.
  16. 16. Next steps 15The Fundamentals of Accessible Web DesignBranding Brand WCAG's recommendations help make the web more perceivable, operable, understandable, and robust—or to put it simply, accessible. Contact us for assistance in making your digital experiences more accessible.
  17. 17. About Branding Brand 16The Fundamentals of Accessible Web DesignBranding Brand Branding Brand is the retail industry's largest mobile commerce platform, powering shopping experiences for over 200 enterprise brands. In addition to being named a Gartner “Cool Vendor” of apps, we were also named a 2016 Forrester Wave Leader in “Mobile Commerce and Engagement Platforms.” Visit us at blog.brandingbrand.com.

×