When federal or state laws discuss accessibility compliance, they frequently refer to something called the WCAG, or Web Content Accessibility Guidelines. The WCAG is a collection of worldwide standards used to make sure websites are accessible to those with disabilities. In other words, they show organizations what websites need to do to be accessible, giving developers clear goals for optimization.
Periodically, the WCAG is updated to account for new technology. One of the most recent updates a few years ago was the WCAG 2.1. This update added 17 new “success criteria” at various points within the guide.
WCAG 2.0 vs. 2.1
WCAG 2.1 actually was published as an addition to the 61 factors contained in 2.0 (not including the conformance section). Instead of replacing 2.0, 2.1 was added in various sections of 2.0, so if you conform to 2.1, you are conforming to 2.0 as well.
Let’s take a look at the WCAG 2.1 additions, and how they affect the current state of digital accessibility.
Note: The A to AAA rating by each change indicates the level of accessibility. Businesses must aim for at least AA in most cases, while AAA is typically reserved for government websites.
1.34 Orientation (AA)
The addition here focuses on mobile devices, a common theme among the changes that WCAG made. This particular update notes that content should not be restricted based on its orientation – whether it’s viewed in portrait or landscape mode. Those in wheelchairs or beds may only have access to a tablet in a particular orientation.
1.3.5 Identify Input Purpose (AA)
This indicates that input fields should use programmatically determined inputs wherever possible. In other words, enable autofill. This is of great help for those with dyslexia and dyscalculia who may have trouble typing out their addresses, etc. Everyone else likes it, too.
1.3.6 Identify Purpose (AAA)
This is a further standard that adds programmatic determination to the purpose of user interfaces, components, icons and regions. This is to aid those with language processing disabilities who are using filters that change words to symbols, etc.
1.410 Reflow (AA)
This sets limits for vertical scrolling to a width equivalent of 320 CSS pixels, and horizontal scrolling to a height equivalent of 256 CSS pixels. This helps those who may have trouble following back-and-forth scrolling while reading, due to low vision and similar issues. It’s another case where the change also helps users without disabilities and makes the site more friendly overall.
1.4.11 Non-Text Contrast (AA)
User interface components and graphical objects should have a contrast ratio of at least 3:1 against nearby colors. This helps users with vision issues, especially those with low contrast sensitivity who may have trouble making out objects if surrounding shades are too similar.
1.4.12 Text Spacing (AA)
This adds a requirement for markup languages to set proper text spacing like so:
- 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.
This helps those with dyslexia or low vision. There are some exceptions for human languages where this isn’t as possible.
1.4.13 Content on Hover or Focus (AA)
Both hovering cursors and keyboard focus buttons should allow additional content to become visible. However, this additional content should be easy to manage – that means it should be readily dismissible, but also support interaction with the cursor or keyboard (i.e., you can copy and paste the additional content). It should also be persistent until the hovering/focus is ended.
2.14 Character Key Shortcuts (A)
Keyboard shortcuts can be enabled on a site, but they should be easily controllable. That means allowing them to be turned off, remapped, or only active when the keyboard focus mode is being used. This is because some shortcuts can interface with navigating solely by keyboard.
2.2.6 Timeouts (AAA)
This addition is primarily for government websites that time out and automatically log a user out for security reasons. It mandates that users should be warned about the duration before a timeout, or that data entered in web forms should be saved for more than 20 hours when they return.
2.3.3 Animation from Interactions (AAA)
Websites may use motion animation that’s triggered by a specific interaction. This type of animation should have an option to disable it whenever possible. For example, little animations that follow a mouse cursor as it moves can be very annoying for those certain kinds of inner-ear or vision problems.
2.51 Pointer Gestures (A)
Multipoint or path-based gestures (think some of the more complex trackpad controls) should have an option to be used with a single pointer/cursor on websites wherever possible. Some users with disabilities can’t use those gestures on a trackpad at all and need a way to operate important website tasks – such as cropping a photo with an online tool.
2.5.2 Pointer Cancellation (A)
This addition generally requires pointer activation to be very accurate when using a cursor. That includes the ability to cancel or reverse a function, and to make sure that a pointer doesn’t accidentally activate the wrong button through inaccuracy. This is to help those using pointers with vision or motor-related disabilities, as well as those using touchscreens. It also helps all users avoid annoying accidental selections when they meant to choose something else.
2.53 Label in Name (A)
User interfaces must use accurate labels with text that always matches the text displayed on the interface. In other words, buttons should be tagged with exactly what the button says. This helps screen readers and voice controls.
2.54 Motion Actuation (A)
When mobile devices encounter digital content that can be controlled by motion (i.e., tilting or shaking the device), this actuation should have the option to be disabled when possible, unless it can be supported using assistive technology.
2.5.5 Target Size (AAA)
Target size for clicking with a pointer, etc., should be at least 44 by 44 CSS pixels. There are certain exceptions, like an anchor link in text or the ability for users to choose the size of the target.
2.5.6 Concurrent Input Mechanisms (AAA)
Here the WCAG 2.1 says web content should not restrict use of input modalities available – in other words, website operation should be compatible with keyboard, mouse, stylus, voice controls, etc., whenever possible.
4.1.3 Status Messages (AA)
Any status messages on a site should be programmatically determined so they can be presented to users with disabilities. This could be as simple as a sound noting that a web form has been successfully submitted.
Looking for Additional WCAG Help?
Blue Atlas Marketing’s experienced team is standing by to help you with accessibility design decisions and new web development goals. Talk to us about what you need and where accessibility is a priority: We can help diagnose issues and make changes that will make your site friendlier for everyone while meeting compliance requirements.