Web Content Accessibility Guidelines

In 2016, a blind man named Guillermo Robles 0:00 sued Domino's Pizza after he was unable to use a screen reader 0:06 to place an order through either Domino's website or mobile app. 0:10 A lower court ruled against Domino's for 0:16 violating the Americans with Disabilities Act. 0:19 And disability advocates won an important victory in 2019 when 0:22 the United States Supreme Court let the ruling stand. 0:26 But Domino's Pizza isn't the first to be subject to a lawsuit due to 0:32 online content that wasn't accessible to users with disabilities. 0:37 There's also Beyoncé.com, Amazon, 0:42 Nike, Target, Netflix and Hulu, 0:48 Harvard University, Fox News, Burger King, CVS Pharmacy, 0:54 Winn Dixie Supermarkets, Rolex watches, Blue Apron...the list goes on and on. 0:59 And accessibility laws don't just affect websites, and apps. 1:07 A company called Redbox was successfully sued in 2014 because its DVD rental 1:11 and return kiosks were not accessible to blind users. 1:18 The legal specifics of web accessibility 1:23 might vary a bit depending on what country you live in. 1:26 But in terms of measuring your work against an internationally 1:30 recognized standard, the guidelines you'll refer to most are the WCAG or 1:35 Web Content Accessibility Guidelines. 1:40 WCAG is broken up into four principles. 1:44 You can use the acronym POUR to remember them. 1:48 Accessible web content must be perceivable, 1:52 operable, understandable, and robust. 1:57 Within these four principles are 13 accessibility guidelines. 2:02 This includes new success criteria added version 2.1 of the WCAG documentation 2:08 in June 2018, relating primarily to mobile accessibility. 2:15 The official WCAG documentation is pretty dense. 2:23 Though fortunately there's plenty of supplementary resources online 2:27 to help us understand the guidelines. 2:32 For example, I've included in the teacher's notes 2:35 a resource called 13 Days of Accessibility, 2:39 which introduces each guideline in a simpler, more visual fashion. 2:43 Each WCAG success criteria listing is marked as level A, level AA, 2:52 or level AAA, which describes how difficult designers and 2:58 developers should expect compliance to be. 3:02 On the modern web, level A compliance such as making sure color isn't the only 3:08 visual means of conveying information should be easily within reach. 3:13 Level AA requires more effort, but 3:20 this should be the minimum accessibility standard for online content. 3:23 Level AA color contrast compliance, for example, 3:29 means a text to background color contrast ratio of 3:34 at least 4.5 to 1 for text sizes below 18 points. 3:40 I'm using a resource called the WebAIM Color Contrast Checker to 3:46 illustrate the difference. 3:50 On a pure white background, a medium blue 3:53 such as #0077CC will meet the AA standard, 3:57 but it takes a significantly darker blue to achieve 4:02 the 7 to 1 AAA contrast ratio. 4:07 Note that for 4:12 larger text such as a heading, the contrast ratio is less restrictive. 4:13 3 to 1 to meet the AA standard, and 4:18 4.5 to 1 to meet the AAA standard. 4:21 Level AAA is described as the gold standard level of accessibility. 4:26 Meeting AAA guidelines will create the best possible experience for all users. 4:32 However, some AAA criteria like providing sign language interpretation for 4:38 all prerecorded audio content require specialized and 4:45 sometimes expensive resources. 4:49 The WCAG documentation actually doesn't mandate level AAA compliance 4:53 because it is not always possible to satisfy all level AAA success criteria. 4:59 My recommendation? Treat level AA WCAG compliance as an absolute must have. 5:06 If your product doesn't meet this level of accessibility, your work is unfinished. 5:14 As for level AAA, 5:21 apply these standards whenever it's within your means and abilities to do so. 5:23 In our upcoming videos 5:30 we'll take a closer look at the four WCAG principles of accessibility, 5:32 starting with the letter P, perceivable. 5:37