1 00:00:01,590 --> 00:00:04,538 The fourth guideline, Distinguishable, 2 00:00:04,538 --> 00:00:09,390 describes making foreground content distinguishable against its background. 3 00:00:11,090 --> 00:00:15,814 We covered accessible color contrast in our previous video. 4 00:00:15,814 --> 00:00:21,013 I mentioned WebAIM's color contrast checker as a source for 5 00:00:21,013 --> 00:00:23,143 comparing two colors. 6 00:00:23,143 --> 00:00:29,278 color.a11y.com–that's a one one y–is a helpful resource for 7 00:00:29,278 --> 00:00:33,780 testing the color palette of an entire website. 8 00:00:37,000 --> 00:00:41,374 In addition, browser tools such as the Axe Extension 9 00:00:43,580 --> 00:00:50,036 and Google Lighthouse can test your CSS content and 10 00:00:50,036 --> 00:00:57,403 background colors for sufficient contrast as part of an overall accessibility audit. 11 00:00:57,403 --> 00:01:02,073 I'll discuss these tools in an upcoming video. 12 00:01:02,073 --> 00:01:07,427 In addition, it's critical that designers combine 13 00:01:07,427 --> 00:01:14,613 multiple visual cues to convey information rather than relying only on color. 14 00:01:14,613 --> 00:01:20,430 It's been estimated that 6% of males struggle to distinguish red from green. 15 00:01:21,430 --> 00:01:26,068 Fields containing errors can be impossible to identify for 16 00:01:26,068 --> 00:01:31,540 users with red-green color blindness when a web form uses only red and 17 00:01:31,540 --> 00:01:34,245 green highlights as indicators. 18 00:01:34,245 --> 00:01:37,225 The addition of error messaging and 19 00:01:37,225 --> 00:01:42,293 iconography makes the form accessible for colorblind users 20 00:01:42,293 --> 00:01:47,765 by making them aware there is an issue that needs to be corrected. 21 00:01:47,765 --> 00:01:53,516 The distinguishable criteria has one very important recommendation 22 00:01:53,516 --> 00:01:58,019 that pertains to both audio and videos that contain sound. 23 00:01:58,019 --> 00:02:01,074 Avoid using auto start as much as possible. 24 00:02:01,074 --> 00:02:06,620 Audio that starts automatically interferes with screen reader performance. 25 00:02:07,820 --> 00:02:13,353 Also, any sound three seconds or longer should come with a mechanism for 26 00:02:13,353 --> 00:02:16,747 pausing the sound or lowering the volume. 27 00:02:16,747 --> 00:02:22,035 As for the visual presentation of text, the triple A requirements 28 00:02:22,035 --> 00:02:27,250 offer pretty solid design recommendations for responsive body copy. 29 00:02:28,800 --> 00:02:33,269 Keep your text a maximum of 80 characters per line, 30 00:02:33,269 --> 00:02:38,796 don't justify body copy, and provide sufficient line height, 31 00:02:38,796 --> 00:02:43,532 at least 1.5 times the text size within paragraphs and 32 00:02:43,532 --> 00:02:50,060 at least 2.25 times the text size to create space separating paragraphs. 33 00:02:52,310 --> 00:02:59,161 Double AA requirements under distinguishable called Resize Text and 34 00:02:59,161 --> 00:03:04,045 Reflow also have to do with responsive body copy. 35 00:03:04,045 --> 00:03:11,074 Your user shouldn't have to scroll horizontally to read your text 36 00:03:11,074 --> 00:03:17,470 or struggle to use your navigation even when zoomed in at 200%. 37 00:03:17,470 --> 00:03:22,437 I'm looking at an article by the Bureau of Internet Accessibility, 38 00:03:22,437 --> 00:03:26,559 which recommends zooming in on a web layout to 200% 39 00:03:26,559 --> 00:03:31,123 and checking to see if the content is still legible without horizontal 40 00:03:31,123 --> 00:03:35,004 scrolling, and that the navigation remains functional. 41 00:03:35,004 --> 00:03:38,917 I'm testing this out by pressing command plus to zoom in. 42 00:03:41,490 --> 00:03:47,421 And sure enough, the text still reads well at 200%. 43 00:03:47,421 --> 00:03:52,523 The navigation no longer fits, but it looks like it 44 00:03:52,523 --> 00:03:58,229 switches to a mobile version featuring a drop down menu. 45 00:03:58,229 --> 00:04:03,000 You've probably noticed that many of these criteria involve coordination 46 00:04:03,000 --> 00:04:06,640 between the design and development team. 47 00:04:06,640 --> 00:04:11,822 For example, you might look at the responsive body copy requirement, and 48 00:04:11,822 --> 00:04:17,264 wonder if that guideline isn't more specific to a designer than a developer. 49 00:04:17,264 --> 00:04:22,420 But accessibility should never be just one person's responsibility. 50 00:04:22,420 --> 00:04:27,888 Everyone on your project team should be aware of accessibility needs, to 51 00:04:27,888 --> 00:04:34,164 ensure those needs are considered at every stage, no matter what the end product. 52 00:04:34,164 --> 00:04:37,764 Coming up, we'll take a look at the letter O in pour, 53 00:04:37,764 --> 00:04:40,087 making our web content operable.