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

Web Content Accessibility Guidelines

5:54 with Anwar Montasir

The legal specifics of web accessibility might vary a bit depending on what country you live in, but in terms of measuring your work against an internationally recognized standard, the guidelines you’ll refer to most are the WCAG, or Web Content Accessibility Guidelines. Failure to follow these guidelines risks exposing your product to a costly lawsuit.

    Related Discussions

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

    Sign up

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

    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