How WCAG 2.2 improves your UI

March 27th, 2021

Web Content Accessibility Guidelines 2.2 should officially become a recommendation some time this year so we can take a look at what's new.

Unless something gets modified there will be 9 new Success Criteria:

Out of those 9 I like dragging, both focus appearance ones and pointer target spacing, mainly because they improve user experience all across the board.

Dragging

If you follow dragging criterion you may think twice of implementing a price range slider. The main problem with a price range slider is that it's hard to get it to exactly the price you want to get to. If a range starts at 0 and ends at 100 000, it's difficult sliding it to values between 250 - 500 or even 50 000 - 52 000.
Usually if you really wanted a price range slider on your website then it was best to also implement a way of manipulating those slider values in another way. For instance, by a simple number input. This criterion is basically an enforcing of that, if you have something that you have to drag around for it to work, you should also provide a way of doing it with a simple mechanism for people who just cannot perform a dragging motion as easily as everybody else. It's fair, and it's good for your UI in general.

Focus Appearance (minimum + enchanced)

Next we have those related to focus appearance. I'm not a big keyboard user on the web but I still do it at times. It's incredibly frustrating if you can't see what you're focusing on at the moment, because your keyboard is basically useless at that point. Both of these criteria expand on the focus definition, so the keyboard navigation is more clear for everybody. That's absolutely perfect.

Pointer Target Spacing

Building on the minimal height and width of an interactive element, following this you're also making it easier to select one target rather than another. It makes it less problematic to hit smaller targets on touch devices. Whenever you place two buttons next to each other, remembering this criterion may make you check twice if they're placed in a user-friendly way. There is already one criterion which says you should have your buttons sized at a minimum 44px high and wide. Now we have another one to expand on that. That's really awesome.

As you can see, following pointer target spacing requirements or any others mentioned, makes it easier to navigate your pages. That's the whole point people are missing. Even if you don't know how to create perfect web experiences because you're just starting out, just following some of those requirements will not only give you a better interface in the end, but will also expand the ideas you have about creating user interfaces in general.