Web Accessibility & ADA

What are the Web Content Accessibility Guidelines?

What are the Web Content Accessibility Guidelines?

by | July 26, 2021

How well your business or government website and content conforms to the Web Content Accessibility Guidelines, WCAG, determines if it’s compliant with the Americans with Disabilities Act.

In broad terms, WCAG is the standard published by the World Wide Web Consortium (W3C) as part of the group’s Web Accessibility Initiative, more on that in a moment.

There are different versions of WCAG, each with varying levels of conformance: Level A, Level AA, and Level AAA. To make your website digitally accessible, developers (like ours here at Capitol Tech Solutions) will help you comply with WCAG 2.0 AA and WCAG 2.1 AA. Worldwide, WCAG 2.0 AA is the most-used standard.

What’s the difference between version 2.0 and version 2.1? WCAG 2.0 AA has 38 success criteria, and WCAG 2.1 AA has 50 success criteria. The requirements are essentially to-do lists that will make your website easier to use for people with disabilities and save you from a compliance lawsuit.

In another blog post, we explain why your business website should be ADA compliant.

Need help to understand the Web Content Accessibility Guidelines? Our web developers are certified in ADA compliance standards.

Contact Us

What About Overlay Widgets? Will that solve my ADA Compliance Issue?

If you’re looking for a quick fix to ADA compliance, we at Capitol Tech Solutions are here to tell you there isn’t one.

Whether you’re getting started with a new business website or you’ve received a letter threatening an ADA compliance lawsuit, an ad promising an overlay widget that will solve your problem sounds like a godsend, but it’s merely snake oil.

These widgets don’t change your website’s code or content to be accessible and conform to WCAG. Instead, you’ll get a JavaScript menu that lays over your website when it’s activated.

When a person with a disability activates the overlay widget, it forces them to have a different experience than normal users would.

And a separate and unequal experience is an explicit violation of the ADA.

ADA Maintenance of Your Business Website

OK, so you’ve built an ADA-compliant business website (or had our web designers help you create one). Now what? Like how a car needs its oil changed, you need to perform preventative maintenance to ensure you don’t receive an ADA Website Compliance demand letter from a law firm.

It’s a good idea to schedule periodic accessibility checks to ensure your content stays digitally accessible, either through automated or manual testing. As developers deploy updates to browsers, devices, and assistive technologies, it will change how users interact with your website.

Launching new webpages and products, or updating site navigation or functionality, is also an optimal time to test for website accessibility and ADA compliance.

The Full Breakdown of WCAG 2.0 & WCAG 2.1

The overall goal of The World Wide Web Consortium (W3C) is to publish standards that make the web more uniform so it can run more efficiently.

W3C initially released WCAG 2.0 in 2008, with the WCAG 2.1 update arriving in 2018. The W3C is in the final stages of publishing WCAG 2.2 this year. The group continually refines its guidelines and success criteria to ensure websites are more inclusive for users with disabilities.

WCAG Website Compliance Standards

The W3C uses four principles to determine guidelines for web accessibility:
  • Perceivable
  • Operable
  • Understandable
  • Robust

Under these four principles are a group of guidelines, which directly inform WCAG success criteria.

  • Perceivable
    • Provide text alternatives for non-text content
    • Provide captions and other alternatives for multimedia
    • Create content that can be presented in different ways, including assistive technologies, without losing meaning
    • Make it easier for users to see and hear content
  • Operable
    • Make all functionality available from a keyboard
    • Give users enough time to read and use content
    • Do not use content that causes seizures or physical reactions
    • Help users navigate and find content
    • Make it easier to use inputs other than a keyboard
  • Understandable
    • Make text readable and understandable
    • Make content appear and operate in predictable ways
    • Help users avoid and correct mistakes
  • Robust
    • Maximize compatibility with current and future user tools

Think of the guidelines as goals. The WCAG success criteria are the tools to meet these goals.

Our User Experience web developers are certified in ADA compliance. Let our team test your website’s level of compliance.

Contact Us

What Are WCAG Success Criteria? How Do I Meet These Standards?

WCAG 2.0 and WCAG 2.1 break down each guideline into success criteria used for testing your website’s level of compliance.

As mentioned earlier, there are three degrees of WCAG compliance: Level A, Level AA, and Level AAA. Each is progressively harder than the last. This blog post will highlight WCAG 2.1 AA, as its the standard required under federal and California state law for government websites.

Requirements to meet WCAG are very technical, even when your User Experience team specializes in bringing clients into compliance with the ADA.

If the summary of principles and guidelines didn’t answer your questions, our comprehensive, expandable list below provides a more thorough explanation based on W3C published reports outlining all 50 WCAG 2.1 AA success criteria.

Text Alternatives

  • Non-Text Content: All non-text content presented to a user must have a text alternative that serves the equivalent purpose.

Time-based Media

  • Prerecorded Video-Only & Audio-Only: There must be an alternative for time-based media available to users that presents equivalent information, such as a text transcript, animation, or descriptive audio track.
  • Prerecorded Captions: Developers must provide captions for all prerecorded audio content in synchronized media, such as webcasts, press conferences, and online training presentations.
  • Prerecorded Audio Description or Media Alternative: There must be an alternative for time-based media or audio descriptions of the prerecorded video content provided for synchronized media, such as descriptions in existing pauses in dialogue or presenting information in text form.
  • Live Captions: Developers must provide captions for all live audio content in synchronized media.
  • Prerecorded Audio Description: Developers must provide audio descriptions for all prerecorded video content in synchronized media.

Adaptable

  • Info and Relationships: Information, structure, and relationships conveyed through a website’s presentation must be determinable by assistive technologies or available in text.
  • Meaningful Sequence: When the sequence of content affects its meaning, a correct reading sequence must be determinable by assistive technologies.
  • Sensory Characteristics: Developers must provide instructions for understanding and operating content without using sensory characteristics as determiners, such as shape and position.
  • Orientation: Content does not restrict its view and operation to a single display orientation, i.e., portrait or landscape, unless deemed essential.
  • Identify Input Purpose: Input fields, such as email and password logins, must be programmed to state what type of information is being requested and for what purpose the user will use it.

Distinguishable

  • Use of Color: Color must not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • Audio Control: If any audio on a webpage plays automatically for more than three seconds, there must be an option to pause or stop the audio or a tool to control audio volume independently from the overall system volume.
  • Minimum Contrast: The text’s visual presentation and images must have a contrast ratio of at least 4.5:1. Some exceptions apply.
  • Resize Text: Except for captions and images of text, text must be resizable without assistive technology up to 200 percent without the loss of content or functionality.
  • Images of Text: Users must adjust the text presentation as needed, including font size, foreground and background color, font family, line spacing, and alignment.
  • Reflow: Developers must present content without the loss of information or functionality and the requirement of scrolling in two dimensions.
  • Non-Text Contrast: The visual presentation of user interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors.
  • Text Spacing: Content must support the ability to increase spacing between lines, words, letters, and paragraphs to assist a user with effectively reading text.
  • Content on Hover or Focus: This condition ensures that additional content does not interfere with viewing or operating a webpage’s original content.

Keyboard Accessible

  • Keyboard: All functionality of the content must be operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just endpoints.
  • No Keyboard Trap: Content must not “trap” keyboard focus within a subsection of content on a webpage, such as a dialogue box that forces users into clicking “cancel” or “OK” buttons.
  • Character Key Shortcuts: Users must be able to turn off or reconfigure shortcuts that are made up of only character keys to reduce accidental activation of keyboard shortcuts.

Enough Time

  • Timing Adjustable: Webpages must provide options to disable time limits, customize the length of time limits, or request more time before a time limit occurs to help users who require more time to complete tasks. An example is a webpage that cycles through the latest headlines in a rotating fashion. There must be an interactive control that allows the user to extend the length of time between each update.
  • Pause, Stop, Hide: For moving, blinking, or scrolling information, users must be able to pause, stop, or hide it. For auto-updating information, users must be able to pause, stop, or hide it or control the frequency of the update.

Seizures & Physical Reactions

  • Three Flashes or Below Threshold: Webpages must not contain anything that flashes more than three times in any one second period.

Navigable

  • Bypass blocks: Users must be able to bypass blocks of content repeated on multiple webpages, such as navigation links, heading graphics, and advertising frames.
  • Page Titled: Webpages have titles that describe the topic or purpose.
  • Focus Order: Users must be able to navigate sequentially through content to encounter information in an order that is consistent with the meaning of the content. Users must be able to operate sequentially from a keyboard.
  • In Context Link Purpose: The purpose of each link must be determined from the link text alone or from the link text together with its programmatically determined link context, such as a “read more” link on a webpage with multiple news articles.
  • Multiple Ways: There must be more than one way to locate a webpage within a set of webpages, except where the webpage is the result of, or a step in, a process, such as a search mechanism.
  • Headings & Labels: Headings and labels describe the topic or purpose.
  • Focus Visible: Any keyboard-operable user interface has a mode of operations where the keyboard focus indicator is visible. An example would be displaying a vertical bar within a text field, indicating to the user that they can insert text.

Input Modalities

  • Pointer Gestures: All functionally must allow people with disabilities to use multipoint or path-based gestures for operation with a single pointer without a path-based gesture. An example would be a website with a map view supporting the pinch gesture zoom into the map content.
  • Pointer Cancellation: Measures must be in place to allow users to abort or undo accidental pointer input. An example would be allowing the user to load a new page or follow a link when they release a mouse pointer or lift their finger from a touchscreen (called an Up-Event activation).
  • Label in Name: For user interface components with labels that include text or images of text, the name contains the visually presented text.
  • Motion Actuation: Users must have the ability to disable functionalities operated by device motion or user motion functionalities to prevent accidental actuation.

Readable

  • Language of Page: The developer must determine the default human language of each webpage for assistive technologies to read the text more accurately.
  • Language of Parts: The human language of each passage or phrase in the content must be determinable by assistive technologies to accurately switch between multiple languages.

Predictable

  • On Focus: When any user interface component receives focus, it does not initiate a change of context, such as a drop-down menu that allows users to choose between webpage destinations by pressing one key while maintaining the ability to navigate between options with other keystrokes.
  • On Input: Changing the setting of any user interface component does not automatically cause a change of context unless the interface advises the user of the behavior before using the component, such as entering text into a text field or checking a checkbox.
  • Consistent Navigation: Repeated content on multiple webpages must appear in the same relative order upon each repeat unless the user initiates a change.
  • Consistent Identification: Components with the same functionality within a set of webpages must be identified consistently, such as a search function.

Input Assistance

  • Error Identification: If an input error is automatically detected, the webpage must identify the error item so that the error can be described to the user in a text that assistive technologies can interpret.
  • Labels or Instructions: Developers must provide labels or instructions when content requires user input.
  • Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the recommendations are provided to the user.
  • Legal, Financial, Data Error Prevention: Users must be able to confirm or cancel the entry of legal, financial, or personal information, such as displaying an intermediary confirmation page that displays entered information.

Compatible

  • Parsing: Developers must ensure that webpages have complete start and end tags and are nested according to specification so that assistive technologies can parse the content accurately and without crashing.
  • Name, Role, Value: Developers must ensure that webpages provide role, state, and value information on all user interface components to enable compatibility with assistive technology. An example of this is Accessible APIs.
  • Status Messages: Status messages must be programmed to interact with assistive technologies, such as after a user presses an “Add to Shopping Cart” button, a section of content near the Shopping Cart icon adds the text “5 items.” A screen reader announces “Five items” or “Shopping cart, five items” to the user.

Contact Our Team

Don’t know where to start or can’t find the local talent you need to launch your new digital endeavor? Let our team of experienced professionals help you map out your next project or fix an existing one.

    Related Articles

    Recent Posts

    Keep Current

    Subscribe to our newsletter.

    Patrick Groves

    Share
    Published by
    Patrick Groves
    3 years ago

    Recent Posts

    The Importance of Quality Data in the Age of Artificial Intelligence

    2 months ago

    How to Get a Website Design You Actually Like

    2 months ago

    Capitol Tech Solutions Marks 20th Anniversary with the Unveiling of a Vibrant New Logo

    8 months ago

    Capitol Tech Solutions To Give $40,000 Of Digital Services To Local Non-Profits

    1 year ago

    Capitol Tech Solutions Aids DWR In 2021 Prospector Recipient Award Recognition

    2 years ago

    Why Is Digital Transformation Important For My Organization?

    2 years ago

    This website uses cookies.