Guide · Web accessibility
Website Accessibility Basics: Fixes Based on WCAG 2.2
Website accessibility basics come down to five fixes: readable colour contrast, clear form labels, full keyboard use, a visible focus marker, and text for images. The W3C published WCAG 2.2 as a Recommendation on 5 October 2023, so the standard is new today. Most of these fixes were already in WCAG 2.1 and are cheap to make.
What WCAG 2.2 is, and what changed
WCAG stands for Web Content Accessibility Guidelines. It is the W3C's standard for making web content usable by people with disabilities. Version 2.2 was published as a W3C Recommendation on 5 October 2023.
It adds 9 new success criteria to version 2.1. It also removes one, 4.1.1 Parsing. The W3C says that a site meeting WCAG 2.2 also meets 2.1, because the new version builds on the old one. The W3C working group recommends that sites adopt 2.2 as their new target.
Each success criterion has a level: A, AA or AAA. Most legal and procurement rules ask for level AA. Check which version your client or country names before you pick a target.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2; W3C WAI, What's New in WCAG 2.2
Fix 1: colour contrast
Text needs enough contrast against its background. Under criterion 1.4.3, normal text needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1.
Criterion 1.4.11 adds a rule for interface parts. Form field borders, button edges and icons that carry meaning need a ratio of at least 3:1 against the colours next to them.
Light grey text on white is the most common failure on agency sites. A free contrast checker gives the ratio in seconds. Test your brand colours before they reach a design file.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2
Fix 2: labels and text alternatives
Every form field needs a label or an instruction (criterion 3.3.2). A hint that vanishes when someone starts typing is not a label. Use a real label element tied to the field.
Every image that carries meaning needs a text alternative that serves the same purpose (criterion 1.1.1). A chart needs a short description of what it shows. A button that holds only an icon needs a name, such as "Search". A purely decorative image should have empty alt text so a screen reader skips it.
Also set the language of the page (criterion 3.1.1). Screen readers use it to pick the right voice.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2
Fix 3: keyboard use and focus
All functions must work from a keyboard (criterion 2.1.1). Tab through your own page with no mouse. Can you reach every link, menu and button? Can you open and close every pop-up?
A visible focus marker must show where you are (criterion 2.4.7). Many themes remove the outline for looks. Keep it, or replace it with one people can see.
WCAG 2.2 adds criterion 2.4.11, Focus Not Obscured (Minimum), at level AA. When an item gets keyboard focus, it must not be fully hidden by content the author added. A big banner fixed across the bottom of the screen, called a sticky footer, is the usual cause. The W3C uses that example.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2; W3C WAI, What's New in WCAG 2.2
Fix 4: the new WCAG 2.2 checks
Four of the new criteria at level A or AA matter for most marketing sites. This table lists them with a plain test.
Criterion Level Plain test 2.5.7 Dragging Movements AA Anything done by dragging, such as a slider, can also be done with a single click or tap 2.5.8 Target Size (Minimum) AA Buttons and links are at least 24 by 24 CSS pixels, or have enough space around them 3.3.7 Redundant Entry A A multi-step form does not ask for the same detail twice 3.3.8 Accessible Authentication (Minimum) AA A login does not depend on remembering a password or solving a puzzle, unless another way is offered The login rule means a password field should allow pasting and password managers. Criterion 3.2.6, Consistent Help, at level A, also asks you to keep help links in the same place on each page.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2; W3C WAI, What's New in WCAG 2.2
A 15 minute check for any page
You can test the basics without special tools. Do these in order on one page:
- Tab through the whole page. Note any item you cannot reach or see.
- Run a contrast checker on body text, links and button borders.
- Click each form label. The cursor should jump into the field.
- Check that each meaningful image has alt text and each icon button has a name.
- Zoom the browser to 200%. Nothing should be cut off.
These steps do not replace a full audit. Automated tools find only part of the problems, so a human pass matters. Use the list as a first screen before you brief a developer or an agency.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2
Sources