Today WCAG 2.2 has been released. But what does that mean for website owners?
Legal responsibility of WCAG 2.2
In 2023, you don’t really need to worry about WCAG 2.2. Any laws on the books are in reference to 2.0 or 2.1. Generally speaking, laws lag behind guidelines by many years.
Lawsuits are a little different matter. Since laws like the ADA still don’t specify pass/fail criteria, we might see lawsuits starting to reference WCAG 2.2 coming as early as the end of 2024.
What the new criteria are
For most websites level AAA of WCAG is not relevant. So while there are 3 new criteria at that level, this article will not discuss them. In this article, I will discuss level A and AA criteria.
Consistent help (level A)
This benefits people with cognitive disabilities. But honestly, it will help anyone who has ever been frustrated by “I just saw that help button, where did it go?!?!”
How to pass: if you have help info, make sure it’s always in the same spot. For example, if your chat is in the lower right, it needs to always be in the lower right. It does not mean it has to be always available. But if it is available, it must be in the same spot and look the same.
Redundant entry (level A)
This benefits people with cognitive disabilities. But it benefits anyone using a mobile device or who just doesn’t like to enter the same info over and over.
How to pass: if the website has asked for a piece of information, the site needs to remember it and prefill where appropriate. For example, if someone logged in and you already have their email address, then on the checkout page you need to prefill the email address.
This is a per session requirement. This means if the user logs out then their session has ended.
Focus not obscured (level AA)
This benefits lots of people. Basically, if an item has focus, it needs to be at least partially visible. Ie: I’m filling out a form and moved to the next field, I need to be able to see the next field and not have it totally covered by the random chat that decided to suddenly appear.
How to pass: Make sure you don’t suddenly put things onto your webpage. Be extremely careful with any floating or fixed items. In fact, rid of as many floating or fixed items as possible.
How to fail: If the website has a big banner fixed to the bottom and the user can’t see half the footer, that’s a failure. If I’m halfway through filling out a form and a time delay popup or slide in appears covering half my screen.
Dragging movements (level AA)
This benefits people with fine motor skill challenges. Or people using screen readers. Or me in the kitchen trying to use my iPad while my fingers are covered in flour.
How to pass: if your user interface requires dragging, make sure there is an alternative that doesn’t. Ie: if you have to drag to pan the map to the left, make sure there is also a clickable option to move the map left.
Target minimum size (level AA)
This benefits people with fine motor skill and vision issues. Also me when I’m in the car on my phone attempting to reserve a spot in line at the restaurant (yes, I’m the passenger when doing this).
How to pass: make link and button targets at least 24px by 24px. Easy way to do that is use a font size of at least 16px (frequently entered in your stylesheet as font-size: 1rem;) with a line height of 1.5. That makes your links 24px tall. Now just make sure it’s more than 2 letters.
If you’ve got social media icons, use a circle or square background because the facebook “f” is really thin.
Accessible authentication (level AA)
This benefits people with cognitive disabilities. It also benefits anyone who has ever mistyped a piece of data. So, all of us.
How to pass: don’t make people solve, recall, or transcribe something. For example, all data input fields need to accept copy/paste. That includes one-time codes. You also can’t require people to solve problems or puzzles, like math.
I sincerely hope that requirement brings about the end of random PIN codes and what color was your first car questions. This would be great for me because I honestly have no clue what the telephone PIN code I set up with the bank 12 years ago was.
Sadly, it does allow for object recognition. So recaptchas where you have to identify all of the bridges are likely here to stay.