Filipe
Researcher
Expertly reviewed by
#wcagguide #compatible
3-5 minutes

WCAG Master Guide: Compatible

Compliance Data & Impact
Critical
Blind Low vision Hearing Mobility
WCAG 2.1 Level AA

Since its inception, assistive technology has been changing the lives of the disabled community in considerable ways. Millions of people across the globe rely on this technology to browse, shop, and learn online.

The compatible requirements outlined in the Web Content Accessibility Guidelines (WCAG) will ensure that more people have access to your online content, services, and products.

Infographic: WCAG compatible success criteria

Compatible Guidelines Explained

The purpose of WCAG’s compatible guidelines is to ensure websites are able to support existing and future assistive technologies. 

A site’s code and structure should not interfere with how assistive technology functions. Instead, it should ensure disabled users can easily interact and engage online now and in the future. 

Assistive technology is always changing and adapting to new requirements, something website developers and owners should stay up to date with if they want to stay compliant. 

WCAG Compatible Success Criteria

Here are the compatible success criteria you would need to meet in order to achieve Level A or higher.

Parsing

For websites that have been coded using HTML and XML and make use of markup languages, the following requirements need to be met:

  • All elements need to have complete start and end tags.
  • Elements should be nested according to their specifications.
  • No elements should contain duplicate attributes.
  • All element IDs are unique.

Name, Role, Value

The name and role of any user interface components on your site can be programmatically determined by assistive technologies. This includes form elements, links, and any components that are generated by scripts. 

The purpose of this criterion is to ensure that assistive technologies can gather the necessary information, activate, and stay up to date on the status of any components. 

Status Messages

This requirement states that if you need to make users aware of important changes in content that doesn’t have focus. Developers should ensure that assistive technology is able to notify users about these changes through status messages. 

A status message is any message that informs a user about the success or results of an action, the state or progress of an application, or the existence of an error. 

Compatible Best Practices

To achieve Level AA by complying with the necessary compatible requirements of WCAG, here are some best practices you can follow: 

  1. Validate your HTML. Include a valid document type declaration in the code of your site. This is often also referred to as !DOCTYPE statement. Developers can use off- or online validators to check the validity of their HTML pages. 
  2. Test your site using different assistive technologies. Take the time to test your site using a variety of assistive technologies to ensure your code is compatible and that the user experience is not impacted.
  3. Make use of ARIA labels. ARIA-label attributes add text labels to important user interface components on your site, ensuring assistive technology can identify the component for a user. 
  4. Add status messages to content that changes. Any time a user performs an action on your site that might activate a content change, it should be accompanied by a status message. Some examples of these actions include performing a search on a site, adding products to a cart, upgrading an application, and completing a form field. 

Frequently Asked Questions

When it comes to remediating your website to comply with WCAG requirements, all assistive technologies are important. However, it’s highly recommended that you start by focusing on screen readers, speech-to-text software, screen magnifiers, braille displays, and keyboard navigation. 

The aria-label attribute should only be added to interactive elements on your site. This includes links, videos, and form controls. Basically, you should be adding an ARIA label to any elements that don’t have a visible name.

Reccomended articles