There are ten important updates in the upcoming release of WCAG 2.2 that you need to be aware of, whether you’re designing websites, apps or presentations. The next version of WCAG is due to release in April 2023 or so. That’s what the rumor is.
1) Focus state should surround whole element.
2.4.11 has to do with the focus states of elements as you’re navigating around a website with a keyboard.
The entire element that is being focused on has to be enclosed within the focus state. So if you have a radio button and a label, don’t just focus on the radio button. Put your focus state around the radio button and label. Also, those focus states have to have a minimum contrast of 3 to 1 with the surrounding colors.
I’ve seen way too many focus states that are almost impossible to tell that they’re there.
2) Don’t completely hide an item in focus.
Number two is another navigation issue. 2.4.12 is a new AA standard and it’s to do with making sure those focus states aren’t completely obscured. Let’s say the page has a sticky header or footer or some other element, and when I’m tabbing around some of the focused items are hidden behind the banner or the navigation and I can’t see them.
We have to make sure that the focus is not entirely hidden by those elements. If it’s partially hidden, that’s okay for AA compliance.
3) Don’t hide any part of a focused item.
2.4.13 is a new AAA standard where the focus that we talked about previously in that 12, you could have the focus partially obscured. However, if you want to go for AAA compliance, none of the focus can be obscured by anything else on the screen.
4) Have an alternative way to drag and drop
2.5.7 is a new AA standard. The problem here would be something like, “I can’t hold down a mouse button and drag it accurately enough to move items in a list.” The users should be able to either click on the object that they want to move and then click on the destination and have it move on that second click.
Or there could be some on screen controls for the object so that when the one you want to move is selected, you can use those on screen controls to move that object to where it needs to be. This is going to be especially tricky for our LMS creators, manufacturers, and developers.
5) Make sure your tap targets are big enough
It’s going to require a lot of work to meet the double standard for this new one. Number five has to do with top target sizes. It’s 2.5.8 and it’s a new AA standard. And now there is actually a requirement to that the target has to be a minimum target size of 44 pixels by 44 pixels in order to meet AA compliance.
It also this doesn’t just apply to the tap target size itself, it also applies to the spacing between buttons. So now there is a minimum spacing of 44 pixels between buttons or other interactive elements on the screen. This is just to make sure we’re accounting for fat thumb and fat finger syndrome.
6) Help elements should be in a predictable and consistent place.
This one is 3.2.6 and it’s specifically about users getting help on your site. You have to have a consistent place for help links to live. A user might be trying to fill out a form on a website and aren’t quite clear on what they’re being asked or why they need to do this in the first place. They might remember that on some other pages there was a help chat window, but it’s not on all of them. And the user isn’t really sure where to go.
So you need to make sure that any options for help or support are predictably located and consistent across your whole site.
7) Let users reset passwords by email.
3.3.7 requires website to actually have a “Did you forget your password” link. A user has to be able to reset their password by email.
Yep. That is a new standard and I love it.
Now, there are exceptions. You have to have that link unless the authentication process includes one of these things:
- Another authentication method so that you’re not testing the cognitive function of a human being (meaning they don’t have to remember a long, complex password), or
- There is a mechanism in place to assist a user in completing this cognitive function test of remembering a password (like a password hint).
8) The stricter version of number 7
3.3.8 is the same rule, only for AAA compliance. And that means that there are zero exceptions. So… you must 100% have the “forgot password” link that gives you an email to reset.
9) Don’t make your users type the same info twice.
3.3.9 is about redundant information entry and this is a new A standard which means that you have to do this one. We can state the problem kind of like this: If I’m trying to make an appointment online and I’m filling out this form, the form asks me to enter my address two separate times. We’re not talking shipping and billing address–we’re talking about the same exact address.
You can’t make them retype the same thing. You have to use code to be able to pull the information they’ve already entered and pre-populate those other fields. There are some exceptions for this, if reentering that information is absolutely essential. And example could be something like confirming a password. A lot of financial transactions require you to enter in your bank account number twice.
Another exception is that if the information you’re asking to be entered twice ensures the security of the content, that’s okay. Or if the previously entered information is not valid anymore, then yes, ask them to enter the information into the fields.
10) They took one standard away
I’m going to let you off easy on this one. It’s it’s an update, but it’s not a new thing. They actually took one away, which is kind of cool. 4.1.1 is now obsolete (it had to do with assistive technology being unable to like parse HTML and and all this other stuff, but those problems actually don’t exist anymore).
So they finally took that one out. Yeah, one less to remember.
What does this mean for you?
As we make our content more accessible, we need to really take a look at the platforms we’re using, especially learning management systems. If you’re a company that makes that software, you already have a ton of issues and now you’re going to have more.
A lot of these are really important for that presentations, word docs, PDFs, things like that. Tap target size 100% applies. That’s a big one. The consistent help would actually probably be important for anybody who is working in a presentation software and the end product goes to a kiosk. Building in your help into that kiosk deck in a consistently present and a consistently located manner is important to remember.
I hope you found it useful. Now go forth and design accessibly.