Accessibility: applying the four WCAG principles in practice

What it is

The W3C's Web Content Accessibility Guidelines (WCAG) 2.2 organize their success criteria under four principles; the German translation of version 2.0 published by the W3C names them perceivable, operable, understandable and robust. Each criterion has a conformance level of A, AA or AAA; AA is the level usually set as the target. Version 2.2 adds, among others, criteria for the minimum size of controls (2.5.8 "Target Size (Minimum)": 24 by 24 CSS pixels), for focus that is not obscured (2.4.11), for not asking users to re-enter information they have already provided (3.3.7 "Redundant Entry"), and for logging in without a memory or puzzle task (3.3.8 "Accessible Authentication (Minimum)"); criterion 4.1.1 "Parsing" has been removed in 2.2 as obsolete. The English original text is always the authoritative version; translations are not normative.

Why it matters

Barriers exclude people who work with a screen reader, keyboard, magnification or voice control. The same defects also hinder search engines and automated readers: an image without a text alternative, a button without an accessible name, or a field without a label is invisible to any non-visual access. The four principles are a review structure that you can walk through in your head even without tools.

How to apply

• Perceivable: Give every informative image an alt attribute, and purely decorative images an empty one (alt=""). Normal text needs a contrast ratio of at least 4.5:1, large text 3:1. Never convey information through color alone; underline links within running text.
• Operable: All functions are reachable by keyboard, the focus is visible and never gets trapped anywhere (2.1.2 "No Keyboard Trap"). Click and tap targets are at least 24 by 24 CSS pixels or have sufficient spacing. A skip link leads to the main content.
• Understandable: Declare the page language with lang, and mark foreign-language passages individually. Keep navigation the same on all pages. Error messages name the field and the correction; data that has already been entered is not requested again.
• Robust: Use semantic HTML (headings, lists, landmarks, button instead of a clickable div); use ARIA only where HTML has no equivalent.
• Testing: first run automated checks (they find the formal violations), then do one pass using only the keyboard and one with a screen reader through the most important flows.

Pitfalls

A title attribute is not an accessible name. Removing focus outlines for design reasons violates 2.4.7. Automated testing tools generally do not evaluate text alternatives for their content: alt="Bild" passes the check and helps no one. "Accessibility overlays" added after the fact do not replace missing structure in the source code. Anyone who reads only the German translation of version 2.0 will not know the criteria added in 2.1 and 2.2.