Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Accessibility For Web Developers

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

WCAG Principles: Perceivable (part 2)

4:40 with Anwar Montasir

The WCAG principle called Perceivable states that information and user interface components must be presentable to users in ways they can perceive. This principle is all about providing alternative methods of understanding your web content. If users can’t see your content, for example, let them hear it.

WCAG Perceivable Principle

  • Text alternatives

  • Captions and transcripts

  • Use semantic HTML

  • Portrait and landscape orientation

  • Sufficient color contrast

  • Combine multiple visual cues, not just color

  • Avoid autostarting audio or video

  • Responsive body copy

  • Legible at 200% zoom

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up