Contact Us

WCAG 2.2 in Practice: Patterns to Fix Today

·

by

David Turner

Let’s talk about making the web a better place! No, not just prettier. We mean better for everyone — including people with disabilities. That’s where WCAG 2.2 comes in. It stands for Web Content Accessibility Guidelines. Version 2.2 is the latest update, and it comes with fresh rules and reminders to make websites easier to use.

So, grab a cup of tea, stretch your fingers, and let’s go through common patterns you should fix today. They’re simple, we promise.

🛠️ Why Should You Care?

  • It’s the right thing to do.
  • You avoid legal trouble.
  • More people can use your website. Yay more traffic!

Let’s look at how to follow WCAG 2.2 in a fun, practical way. No jargon. No fancy terms. Just good design and better code.

🚧 Pattern Problems You Can Fix Today

1. Focus Indicators That Actually Show Up

When someone tabs through your site using a keyboard, they need a visual indicator to know where they are. A blue glow, a thick border—anything! Missing this? That’s a problem.

Fix it: Stop removing outlines in CSS like this:

button:focus {
  outline: none;
}

Instead, use something visible and stylish:

button:focus {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

Add it to all interactive elements—links, buttons, inputs. If it can be clicked, it needs focus style.

2. Don’t Hide Important Stuff for Touch Users

New in WCAG 2.2: Don’t make users do precise gestures to reveal key controls. Tiny buttons inside hover menus are a no-no. Touchscreen users struggle with them.

Fix it:

  • Make hidden actions always visible if they’re essential.
  • Use buttons that are at least 24px tall and wide.
  • Let people use a tap or click instead of hover.

3. Too Many Traps? Set Users Free

Ever get stuck in a date picker with no way out? That’s called a keyboard trap. Users without a mouse hate these.

Fix it:

  • Test all widgets with only a keyboard.
  • Can you escape them using Tab or Esc key? If not, time to adjust!

4. Time Outs Without Warning

Does your site log people out after 2 minutes? That can be rough for someone who needs more time to read or respond.

WCAG 2.2 says: Warn the user first. Let them extend their session.

Fix it:

  • Show a 60-second countdown with a “Stay Signed In” button.
  • Or better yet, avoid short timeouts if you don’t need them.

5. Too Much Drag and Drop

Dragging with a mouse is fun. But some users can’t drag things. That’s a hard fail now in WCAG 2.2 if there’s no other way to do the task.

Fix it:

  • Add “Move Up” and “Move Down” buttons next to items.
  • Make sure your app works with keyboard-only input.

6. Label Things Clearly

Imagine this: a form with five fields that all say “Enter value.” Helpful? Not at all. Users need clear and descriptive labels.

Fix it:

  • Use specific labels like “First Name”, “Email Address”, or “Favorite Snack.”
  • Match the label to the related form control with for and id.

📱 Mobile-Specific Pitfalls

7. Tiny Tap Targets

WCAG 2.2 says tap targets should be at least 24×24 pixels. If users miss and hit something else, they get frustrated. And we don’t want that.

Fix it:

  • Add padding around small icons.
  • Don’t place links or buttons too close together.

8. No Hidden Triggers

Do you have hidden buttons that appear when users long-click or double-tap something? Not cool. Some users don’t even know those actions exist.

Fix it:

  • All actions should be visible or discoverable.
  • Add tooltips or labels that explain gestures, but try to avoid requiring them.

9. Forms That Assume Too Much

Forms often assume users know what’s expected. But not everyone does. That can lead to errors and even accessibility fails.

Fix it:

  • Add placeholder text and real labels.
  • Use ARIA attributes like aria-describedby to connect helpful hints.

🌟 Bonus Tips!

Make Error Messages Crystal Clear

Error messages should tell users what went wrong and how to fix it. “Invalid input” won’t help anyone.

Instead say: “Your password must include 8 characters, a capital letter, and a number.”

Use Headings Well

Headings help users (and screen readers!) jump around your content. Use them in order: <h1> for the main title, then <h2>, <h3>, and so on.

Test With Real Users

Guidelines are great. But nothing beats live testing. Find people with diverse abilities and invite them to try your site. What trips them up? Fix it.

🎯 Quick Checklist

  • Focus is visible: Yes?
  • Big tap targets: Yep?
  • No gesture-only controls: Check?
  • Clear labels and helpful errors: Definitely?
  • Keyboard-friendly navigation: You bet?

🚀 Final Thoughts

You don’t have to fix everything today. But starting with these patterns will make a huge difference. Your users will thank you. And so will future-you.

Accessibility isn’t just about compliance. It’s about kindness, inclusion, and smart design. Let’s build a web that’s better — for everyone.

Now go forth and fix some patterns! You got this.