What is WCAG 2.1?
The Web Content Accessibility Guidelines (WCAG) 2.1 is the new standard set out by the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) for ensuring that those with disabilities have inclusive access to websites and web applications. WCAG 2.1 is different from WCAG 2.0 mostly as a result of the addition of new guidelines and success criteria for mobile device accessibility.
WCAG 2.0 vs 2.1
WCAG 2.0 provided robust accessibility guidelines, however, it was lacking in addressing many of the common features necessary for accessibility on mobile devices (e.g., phones/tables). New guidelines and success criteria in WCAG 2.1 seek to address these shortcomings by introducing seventeen (17) additional criteria that must be met, depending on the desired level of conformance (e.g., A/AA/AAA).
Compliance with the newly introduced criteria are increasingly important, as mobile websites and applications are becoming increasingly popular in their use. Further, man of the newly introduced criteria are beneficial not only for those with disabilities, but for other users as well.
The goal of this article is to outline some of the key differences between WCAG 2.0 and WCAG 2.1, as well as provide you with some context as to why the criteria was added and the resources you need to ensure your application is compliant.
What Has Been Added to WCAG 2.1?
1.3.4 Orientation (WCAG 2.1 AA)
Definition – Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Why it was added – Imagine someone with cerebral palsy who uses a wheelchair and their tablet is attached to it. This person cannot easily rotate their tablet to see websites that do not allow for rotation. That is why it is imperative that developers and creators keep in mind that their content should be able to switch between portrait and landscape views easily without any loss in understanding or information.
1.3.5 Identify Input Purpose (WCAG 2.1 AA)
Definition – The purpose of each input field collecting information about the user can be programmatically determined when:
- The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
- The content is implemented using technologies with support for identifying the expected meaning for form input data.
Why it was added – If you have dyslexia it is incredibly hard to input something like an address into an input field. There are lots of numbers and long words that can get jumbled up and they may have to try several times in order to get it right.
That is why having inputs that identify their purpose, and can use something like autocomplete on Android and iOS or web browsers makes this much easier, not only for the person with disabilities, but for everyone. It reduces mistakes and allows for a cleaner user experience.
1.3.6 Identify Purpose (WCAG 2.1 AAA)
Definition – In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.
Why it was added – Some people with disabilities will use software that changes words into symbols due to a language processing problem. This is especially true for navigation. That is why using things like Aria landmarks to identify regions of the page, links have a clear purpose and language, and icons are marked up so that users can replace them with their own icons to more easily navigate and understand the page.
Keep in mind that there is no way to ensure 100% accuracy with this criteria. By doing your best to understand this need will take you a long way towards being compliant.
1.4.10 Reflow (WCAG 2.1 AA)
Definition – Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
Except for parts of the content which require two-dimensional layout for usage or meaning.
Why it was added – Having to scroll left or right to read each line can be disorienting for those with low vison. Allowing content to reflow within the width of the window, even if text is resized to something like 400% is incredibly helpful to those with disabilities. That is why it is imperative that you have your content remain within the boundaries of the page and not have side scrolling content.
1.4.11 – Non-Text Contrast (WCAG 2.1 AA)
Definition – The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
Why it was added – Those with low contrast sensitivity have a hard time seeing things like text borders that use light colors, or any content that falls below a ratio of 3:1 Against adjacent colors. Meeting this minimum contrast ratio for adjacent colors goes a long way towards allowing those with this sensitivity clearly understand your page and use inputs correctly.
1.4.12 Text Spacing (WCAG 2.1 AA)
Definition – In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.
Why it was added – People with dyslexia or those with low vision have a hard time reading text. Allowing for them to add spacing between each word can help immensely with being able to read the content on your page.
1.4.13 – Content on Hover or Focus (WCAG 2.1 AA)
Definition – Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
- Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
Why it was added – Those with low vision who use a screen magnifier find it incredibly difficult to see content that appears on focus. While this may be beneficial to many who would, for example, like to understand the definition of a word; it is incredibly hard for those with disabilities if that box cannot be moved away from the word, or persistent and dismissible on command.
2.1.4 – Character Key Shortcuts (WCAG 2.1 A)
Definition – If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
- Turn off: A mechanism is available to turn the shortcut off;
- Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc).
- Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.
Why it was added – If you use voice recognition software, having software/website defined shortcuts can be challenging. You could be trying to save something, but what you say triggers a shortcut that actually deletes it. Allowing the user to either turn off, or modify the shortcuts goes an incredibly long way towards allowing those with disabilities to use your software or site well.
2.2.6 – Timeouts (WCAG 2.1 AAA)
Definition – Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions.
Why it was added – Someone with cognitive disabilities who needs to take time to understand information to make a correct selection would have a difficult time if the page automatically timed out and lost all of the information they were inputting. If you have timeouts, letting the user know how much time they have, or allowing them to extend the time allows them to input the information at their own speed without worrying about having to do it all over again.
2.3.3 – Animation from Interactions (WCAG 2.1 AAA)
Definition – Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed.
Why it was added – Someone with vestibular problems (problems with eye movements and balance) might find animations that either follow the focus or moves around the screen disorienting and possibly dizzy or nauseous. Having the ability to turn off animations solves this problem, and allows a user like this to visit your content without difficulty.
2.5.1 – Pointer Gestures (WCAG 2.1 A)
Definition – All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential.
Why it was added – If you have a physical disability like cerebral palsy, you might find it either extremely difficult or impossible to use a gesture-based system to navigate. Having physical buttons that are equivalent to the gestures solves this problem and allows users with physical disabilities to navigate your content easily and accurately.
2.5.2 – Pointer Cancellation (WCAG 2.1 A)
Definition – For functionality that can be operated using a single pointer, at least one of the following is true:
- No Down-Event: The down-event of the pointer is not used to execute any part of the function;
- Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;
- Up Reversal: The up-event reverses any outcome of the preceding down-event;
- Essential: Completing the function on the down-event is essential.
Why it was added – Users with motor disabilities or low vision can sometimes press the wrong button or get frustrated when a button does not have a secondary on/off button or gesture. That is why it is imperative that you do not have interactive pointer buttons immediately activate if the user presses the button, but instead has a method to abort or undo, or an up event (taking your finger off the button for example) causes the button to no longer activate.
2.5.3 – Label in Name (WCAG 2.1 A)
Definition – For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
Why it was added – If someone is using something like voice recognition, having the name attribute be different than the visible label itself will cause a lot of problems. That means by having the name attribute be the same as the label itself is the best course of action. If a user says submit, and the name and visual label are “submit” then the button will activate without a problem.
2.5.4 – Motion Actuation (WCAG 2.1 A)
Definition – Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when:
- Supported Interface: The motion is used to operate functionality through an accessibility supported interface;
- Essential: The motion is essential for the function and doing so would invalidate the activity.
Why it was added – Lets again look at cerebral palsy. You have an app that requires a shake to undo, or you need to do other things without the use of motion actuation. Having the ability to input, undo, etc. without the use of motion is quite beneficial to those with motor impairments. That does not mean you cannot use motion actuation, it simply means that you also need an alternative to the motion.
2.5.5 – Target Size (WCAG 2.1 AAA)
Definition – The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
- Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
- Inline: The target is in a sentence or block of text;
- User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential to the information being conveyed.
Why it was added – Having buttons that are too small become difficult, not only to those with disabilities, but to everyone trying to activate them. Making sure that your buttons and inputs are at least 44×44 pixels (unless you meet the standards outlined in the bulleted list) creates a user interface that is accessible and inclusive to everyone.
2.5.6 – Concurrent Input Mechanisms (WCAG 2.1 AAA)
Definition – Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings.
Why it was added – Again, if we look at voice recognition software, some who use it often switch between different kinds of inputs. Some might use a keyboard and mouse. Others might use a stylus and a keyboard. Disabling the ability to use multiple inputs at the same time has negative effects for many, so ensuring that multiple inputs are not only supported, but allowed to work at the same time goes a long way towards inclusion.
4.1.3 – Status Messages (WCAG 2.1 AA)
Definition – In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Why it was added – Those using screen readers have a hard time understanding if something has been submitted correctly, if an error occurred, or other instances where a status message would appear. Making sure that proper aria roles are being used, and that assistive technology can programmatically understand what is happening is essential to allowing those with visual impairments to successfully interact and understand your content.
Conclusion
While the differences between WCAG 2.0 and WCAG 2.1 are small, they are very important for ensuring that our increasingly mobile-focused lives remain both inclusive and accessible. The 17 new criteria are essential in making sure that the future of the web and applications is mobile friendly, and inclusive for everyone.
If you are ready to make your website or application WCAG 2.1 compliant, we highly suggest using experienced accessibility consultants, such as TestPros.
TestPros offers full life-cycle services for Section 508 and WCAG compliance, to include but not limited to: initial accessibility assessments / gap analyses, accessibility regression testing, integration of automated testing solutions in CI/CD pipelines, remediation of non-compliant software, and training.
To learn more about our Section 508 services, contact us or check out our services page!
