When it comes to website accessibility, the Web Content Accessibility Guidelines (WCAG) are considered the key reference point as well as the industry standard.

These WCAG standards detail various criteria (such as transcripts for videos, adding alt text to images, etc.) you need to fulfill to ensure that your website is accessible to all, including people with disabilities. 

The most recent version of the standards, WCAG 2.1, was introduced in 2018 and included 17 additional accessibility requirements that were absent in the earlier version.

In this post, we will go over the details of the two standards in more detail, along with outlining the difference between WCAG 2.0 and WCAG 2.1 to fulfill WCAG compliance.

Table of Contents:

• How is WCAG 2.1 different from WCAG 2.0?
• WCAG 2.0 vs. 2.1 – Main Differences
• Conclusion

How is WCAG 2.1 different from WCAG 2.0?

Apart from the new additions, WCAG 2.1 offers two very important benefits for users over WCAG 2.0, which we have elaborated on below.

1. Mobile Compatibility

WCAG 2.1  focuses more on mobile, which is something that was lacking in WCAG 2.0.

2. Higher Accessibility 

Unlike WCAG 2.0, the new WCAG 2.1 standard provides accessibility solutions and specifically addresses issues for users with various disabilities(dexterity, motor, and cognitive disabilities) and individuals with low vision as well.

Also Read: Navigating Accessibility Standards: A Comprehensive Guide to WCAG & Web Content Accessibility

WCAG 2.0 vs. 2.1 – Main Differences

Let’s look at how WCAG 2.0  is different from WCAG 2.1 compliance with regard to increasing web accessibility.

1. Reflow

The reflow feature aims to eliminate scrolling content in different directions.

The new standard requires you to program your web content to reflow content in one column that completely fits the width of the window’s boundaries when the web page is zoomed in to ensure easy reading.

2. Orientation

Your website or app should function no matter the orientation of the device it is being used on.

For instance, if a physically impaired wheelchair user is accessing content on a tablet that’s attached to the wheelchair and is unable to rotate the same, you need to ensure that they are still able to use the website or application.

3. Text Spacing

WCAG 2.1 makes it a requirement for websites and applications to make it easy for users to override text spacing style properties so that readability and comprehension may improve. 

This includes line spacing, word spacing, and spacing following paragraphs. 

4. Identify Input Purpose 

This requires the websites to programmatically determine the objective of each input field collecting data or information about the website user.

The requirement applies when the input field acts as a purpose identified in the Input Purposes for UI Components section and when the data or content is filled or implemented with the help of support technologies for identifying the intended meaning for form input data.

The aim of this WCAG 2.1 accessibility requirement is to allow users with learning, cognitive, and motor impairments to access and fill out forms easily.

5. Hover and Focus

The standard requires the content/text available on hover or focus to be fully hoverable and focusable to assist users with visual impairments in reading the content conveniently.

6. Timeouts

Users should be warned of the duration of any inactivity that may lead to a loss of important data unless it is saved for over 20 hours when the user does not take any actions.

7. Pointer Gestures 

All website functionality that uses path-based gestures or multi-points for operation should be made available to be operated with a single pointer unless it is essential to have a multi-point or path-based gesture.

8. Identify Purpose 

The addition requires the content implemented using markup languages to be able to determine the purpose of icons programmatically, User Interface Components, etc., to improve navigation for people with disabilities to use the software easily

9. Animation from Interactions

This addition requires all motion animation triggered by interaction to be disabled completely unless it is essential.

10. Label in Name

All the websites and apps that contain UI components with either text or images-of-text labels must present the text visually.

This was an addition made with the intent to help users that rely on speech input navigate to and activate user interface controls based on their visual labels. 

11. Status Messages

Unlike what 2.0 accessibility requirement, in WCG 2.1, the users should be able to determine the Status messages on the website through properties so that they can be presented with assistive technologies.

12. Character Key Shortcuts

Some mechanisms must be set in place for users to turn shortcuts on or off, remap a shortcut, make it active when the component has focus, etc.

13. Motion Actuation

This requires all functionality operated by the device (motion) to be operated by UI components. Further, the user should be allowed to disable the motion except in a specific use case.

14. Pointer Cancellations 

This requires all the webpage functionality to be executed on the Up event, not the Down event.

This helps users with impairments who may get disoriented or distracted because of a control that’s activated on a Down event. 

15. Persistent  

This requires content not to disappear until the user dismisses it. The requirement is added to give users with low vision and with learning impairments the extra time they need to read the content.  

16. Dismissible 

Users should be able to dismiss the content in such a way that they don’t lose track of their current position. This will allow users to continue reading the web content with ease. 

17. Concurrent Input Mechanisms

This addition requires web content to not restrict the use of available input modalities except where the restriction is absolutely essential from a security viewpoint.

Also Read: WCAG 2.1 Compliance Guidelines: All You Need to Know

To Wrap Up

The importance of the Web Content Accessibility Guidelines in making websites and applications fully accessible to all users is immense. Organizations across the board refer to these guidelines to ensure that their web pages are equally accessible to every single user, including the ones with disabilities.

In this post, we have covered the key difference between WCAG 2.0 accessibility requirements and new WCAG 2.1 requirements so that you can ensure that your website or app is fully compliant with these new guidelines.

At Hurix, we comply with all the WCAG 2.0 accessibility guidelines and principles to offer equal access to digital technology and information to everyone, irrespective of disabilities. Get in touch to know more about us.