Accessibility for Websites and Apps: WCAG 2.2 Basics and a Checklist for This Week

What WCAG 2.2 is, and its four principles

WCAG stands for Web Content Accessibility Guidelines, published by the W3C to describe how web content can work for a wide range of people. Version 2.2 adds a few criteria to earlier versions, including ones about target size and about helping people who find forms difficult. Criteria are grouped into levels A, AA and AAA, and many organisations aim for AA.

Everything sits on four easy-to-remember principles: Perceivable, meaning people can take in the content; Operable, meaning people can control it; Understandable, meaning people can make sense of it; and Robust, meaning it works across browsers and assistive technology.

• Perceivable: text alternatives for images, captions for video, enough contrast.
• Operable: works with a keyboard, gives enough time to read, avoids content that flashes dangerously.
• Understandable: clear language, predictable behaviour, error messages that explain the fix.
• Robust: meaningful HTML so screen readers and other tools can interpret the page.

Contrast, and not relying on colour alone

Text needs enough difference from its background. At level AA the contrast ratio should be at least 4.5 to 1 for regular text and 3 to 1 for large text, and 3 to 1 also applies to UI parts such as input borders and meaningful icons. Free contrast checkers are plentiful, in Figma and in browser tools.

Do not let colour be the only signal. If an invalid field is marked only by turning red, people who cannot distinguish certain colours will miss it. Add an icon or a short message as well.

A ramp helps the wheelchair user and the person carrying boxes; good accessibility helps all of us on our less convenient days.

Keyboard and focus

Plenty of people use a keyboard, a switch or other hardware instead of a mouse. A quick test: put the mouse aside and press Tab through the whole page. Every link, button and field should be reachable, in a sensible order, and it should be obvious where focus currently is.

Do not remove the focus outline unless you replace it with something just as clear, and watch for modals and dropdown menus that let focus escape behind the screen. WCAG 2.2 also adds that focus should not be hidden by floating elements such as a sticky header.

Labels, alternatives and target size

Every input needs a label truly connected to it, using a label element or aria-label, not just placeholder text that vanishes as soon as someone types. Images that carry meaning need text alternatives, while decorative images should have an empty alt so screen readers skip them.

For target size, WCAG 2.2 at level AA sets a minimum of roughly 24 by 24 CSS pixels for tappable targets, with some exceptions. Mobile platform guidance usually recommends larger, since fingers are less precise than a mouse pointer, so leave breathing room between buttons as well.

Why it matters worldwide, and a checklist for this week

Many countries have laws or rules about digital accessibility. A frequently cited example is the European Accessibility Act, which in general terms covers a range of digital products and services offered to consumers in Europe. If your business has customers abroad or plans to expand, check with legal advisers which rules apply. Beyond law, ageing populations in many countries, Thailand included, mean more people who need clear type and bigger buttons.

The checklist below can start this week without waiting for a large project.

• Check contrast on your brand colours and on button text with a free checker.
• Tab through your three most important pages and note where you get stuck.
• Confirm every input has a real label, not just a placeholder.
• Add alt text to meaningful images and leave it empty on decorative ones.
• Make sure the focus outline is visible and has not been removed.
• Check that buttons and links on mobile have tap areas that are not too small.
• Review error messages so they explain the fix and do not rely on red alone.
• Try the built-in screen reader, VoiceOver or TalkBack, on your checkout or sign-up page.