1 00:00:00,980 --> 00:00:06,250 In 2016, a blind man named Guillermo Robles 2 00:00:06,250 --> 00:00:10,840 sued Domino's Pizza after he was unable to use a screen reader 3 00:00:10,840 --> 00:00:16,060 to place an order through either Domino's website or mobile app. 4 00:00:16,060 --> 00:00:19,050 A lower court ruled against Domino's for 5 00:00:19,050 --> 00:00:22,540 violating the Americans with Disabilities Act. 6 00:00:22,540 --> 00:00:26,950 And disability advocates won an important victory in 2019 when 7 00:00:26,950 --> 00:00:31,410 the United States Supreme Court let the ruling stand. 8 00:00:32,470 --> 00:00:37,448 But Domino's Pizza isn't the first to be subject to a lawsuit due to 9 00:00:37,448 --> 00:00:42,616 online content that wasn't accessible to users with disabilities. 10 00:00:42,616 --> 00:00:48,029 There's also Beyoncé.com, Amazon, 11 00:00:48,029 --> 00:00:52,810 Nike, Target, Netflix and Hulu, 12 00:00:54,130 --> 00:00:59,990 Harvard University, Fox News, Burger King, CVS Pharmacy, 13 00:00:59,990 --> 00:01:05,670 Winn Dixie Supermarkets, Rolex watches, Blue Apron...the list goes on and on. 14 00:01:07,060 --> 00:01:11,710 And accessibility laws don't just affect websites, and apps. 15 00:01:11,710 --> 00:01:18,450 A company called Redbox was successfully sued in 2014 because its DVD rental 16 00:01:18,450 --> 00:01:23,230 and return kiosks were not accessible to blind users. 17 00:01:23,230 --> 00:01:26,130 The legal specifics of web accessibility 18 00:01:26,130 --> 00:01:30,070 might vary a bit depending on what country you live in. 19 00:01:30,070 --> 00:01:35,142 But in terms of measuring your work against an internationally 20 00:01:35,142 --> 00:01:40,979 recognized standard, the guidelines you'll refer to most are the WCAG or 21 00:01:40,979 --> 00:01:44,248 Web Content Accessibility Guidelines. 22 00:01:44,248 --> 00:01:48,031 WCAG is broken up into four principles. 23 00:01:48,031 --> 00:01:52,366 You can use the acronym POUR to remember them. 24 00:01:52,366 --> 00:01:57,128 Accessible web content must be perceivable, 25 00:01:57,128 --> 00:02:02,764 operable, understandable, and robust. 26 00:02:02,764 --> 00:02:08,310 Within these four principles are 13 accessibility guidelines. 27 00:02:08,310 --> 00:02:15,920 This includes new success criteria added version 2.1 of the WCAG documentation 28 00:02:15,920 --> 00:02:21,490 in June 2018, relating primarily to mobile accessibility. 29 00:02:23,290 --> 00:02:27,890 The official WCAG documentation is pretty dense. 30 00:02:27,890 --> 00:02:32,450 Though fortunately there's plenty of supplementary resources online 31 00:02:32,450 --> 00:02:35,250 to help us understand the guidelines. 32 00:02:35,250 --> 00:02:39,374 For example, I've included in the teacher's notes 33 00:02:39,374 --> 00:02:43,222 a resource called 13 Days of Accessibility, 34 00:02:43,222 --> 00:02:48,645 which introduces each guideline in a simpler, more visual fashion. 35 00:02:52,374 --> 00:02:58,003 Each WCAG success criteria listing is marked as level A, level AA, 36 00:02:58,003 --> 00:03:02,943 or level AAA, which describes how difficult designers and 37 00:03:02,943 --> 00:03:06,720 developers should expect compliance to be. 38 00:03:08,220 --> 00:03:13,830 On the modern web, level A compliance such as making sure color isn't the only 39 00:03:13,830 --> 00:03:18,880 visual means of conveying information should be easily within reach. 40 00:03:20,820 --> 00:03:23,363 Level AA requires more effort, but 41 00:03:23,363 --> 00:03:29,430 this should be the minimum accessibility standard for online content. 42 00:03:29,430 --> 00:03:34,950 Level AA color contrast compliance, for example, 43 00:03:34,950 --> 00:03:40,219 means a text to background color contrast ratio of 44 00:03:40,219 --> 00:03:46,126 at least 4.5 to 1 for text sizes below 18 points. 45 00:03:46,126 --> 00:03:50,691 I'm using a resource called the WebAIM Color Contrast Checker to 46 00:03:50,691 --> 00:03:53,710 illustrate the difference. 47 00:03:53,710 --> 00:03:57,917 On a pure white background, a medium blue 48 00:03:57,917 --> 00:04:02,581 such as #0077CC will meet the AA standard, 49 00:04:02,581 --> 00:04:07,473 but it takes a significantly darker blue to achieve 50 00:04:07,473 --> 00:04:11,020 the 7 to 1 AAA contrast ratio. 51 00:04:12,440 --> 00:04:13,090 Note that for 52 00:04:13,090 --> 00:04:18,890 larger text such as a heading, the contrast ratio is less restrictive. 53 00:04:18,890 --> 00:04:21,693 3 to 1 to meet the AA standard, and 54 00:04:21,693 --> 00:04:26,822 4.5 to 1 to meet the AAA standard. 55 00:04:26,822 --> 00:04:32,512 Level AAA is described as the gold standard level of accessibility. 56 00:04:32,512 --> 00:04:38,900 Meeting AAA guidelines will create the best possible experience for all users. 57 00:04:38,900 --> 00:04:45,104 However, some AAA criteria like providing sign language interpretation for 58 00:04:45,104 --> 00:04:49,522 all prerecorded audio content require specialized and 59 00:04:49,522 --> 00:04:52,250 sometimes expensive resources. 60 00:04:53,320 --> 00:04:59,020 The WCAG documentation actually doesn't mandate level AAA compliance 61 00:04:59,020 --> 00:05:05,090 because it is not always possible to satisfy all level AAA success criteria. 62 00:05:06,770 --> 00:05:14,320 My recommendation? Treat level AA WCAG compliance as an absolute must have. 63 00:05:14,320 --> 00:05:19,580 If your product doesn't meet this level of accessibility, your work is unfinished. 64 00:05:21,170 --> 00:05:23,440 As for level AAA, 65 00:05:23,440 --> 00:05:28,530 apply these standards whenever it's within your means and abilities to do so. 66 00:05:30,450 --> 00:05:32,080 In our upcoming videos 67 00:05:32,080 --> 00:05:37,480 we'll take a closer look at the four WCAG principles of accessibility, 68 00:05:37,480 --> 00:05:39,850 starting with the letter P, perceivable.