Accessible Websites: A Practical Guide to WCAG 2.2

Accessibility is often checked at the end of a project and retrofitted. That is expensive and only partly successful, because many problems arise from design and structural decisions. Yet good access is usually no sorcery: with clean, semantic HTML and conscious design, many requirements are already met. This article shows what matters, what has changed with WCAG 2.2, what the German Accessibility Act (BFSG), which implements the European Accessibility Act, means and how to test. It does not replace legal advice.

Why it pays off

Accessible sites reach more people: users with visual, hearing, motor or concentration impairments, older people, people with a broken arm or glaring sun on the display. Added to that are benefits for everyone: better usability, clean structure for search engines and easier maintenance. There are also legal requirements (see below).

Semantic HTML as the foundation

The most important step is also the simplest: use the fitting HTML element for the purpose. <button> for actions, <a> for links, <label> for form fields, <nav> for navigation, <main> for the main content, headings in a sensible order. These elements bring meaning and keyboard operation with them. ARIA attributes complement that where HTML is not enough; they do not replace bad HTML. A common principle: no ARIA is better than wrong ARIA.

An example from our own site: an image gallery (a list of screenshots) had an ARIA role on the list element that removed the list meaning. As a result the entries were formally invalid. An automated check tool found it, and the fix was to remove the unnecessary role.

What to look out for

• Keyboard: everything interactive must be reachable and operable without a mouse, in a sensible order. A “Skip to content” link helps.
• Visible focus: the focus outline must never be removed and must be clearly recognizable.
• Contrast: text needs sufficient contrast with the background (at least 4.5:1, for large text 3:1). That also applies in dark mode.
• Alternative text: images with meaning get a short, meaningful description, purely decorative images an empty alt.
• Forms: every field has a visible label, error messages are understandable and communicated to assistive technology.
• Headings and language: a logical heading structure and the correct page language (lang).
• Motion: animations should be reducible (prefers-reduced-motion).
• Zoom and size: content stays usable at 200% magnification. Click targets are large enough.

What WCAG 2.2 added

The Web Content Accessibility Guidelines 2.2 build on earlier versions and add, among other things: focus must not be hidden by other elements, click and tap targets should be at least 24 × 24 pixels (or have enough spacing), dragging movements need alternatives, help is offered consistently in the same place, users do not have to retype known information, and logging in must not depend on a memory or puzzle test. Conformance level AA is the usual benchmark.

The German Accessibility Act (BFSG)

The BFSG implements the European accessibility directive and has applied in Germany since 28 June 2025. It affects certain products and services for consumers, including online shops (e-commerce services), banking services and e-books. There are exceptions for micro-enterprises that provide services (fewer than 10 employees and at most €2 million turnover or balance sheet total). Whether you are affected and which obligations (for example an accessibility statement) apply should be checked or have checked in each case. Regardless, accessibility is a quality feature.

Test, do not just check

Automated tools such as axe or Lighthouse find part of the problems, roughly a third to about half depending on the study. We also check our own website automatically, but that does not replace a manual test. You only find the rest through:

1. Keyboard test: operate the page using only Tab, Space, Enter and the arrow keys.
2. Screen reader test: at least one pass with VoiceOver (Mac/iOS) or NVDA (Windows).
3. Zoom and contrast: enlarge to 200%, check colors and dark mode.
4. Real users: where possible, involve people with impairments.

Checklist

1. Semantic elements instead of generic divs and spans.
2. Keyboard operation and visible focus.
3. Contrast in all color modes.
4. Alternative texts and labels.
5. Forms with labels and clear error messages.
6. Heading structure, page language, “Skip to content”.
7. Reducible motion, zoomable content.
8. Automatic check in the build, manual test before launch.

Briefly answered

What does accessibility cost? Planned from the start, little. Added later it can become considerably more laborious.

Is an automatic test enough? No, it covers only part of it.

Does it apply only to large companies? No, the exceptions mainly concern micro-enterprises providing services. Check your case.

Does it help SEO? Indirectly: clean structure, headings and alternative texts also benefit search engines.

Conclusion

Accessibility is a matter of attitude and craft: semantic HTML, operable elements, good contrast and regular testing. Anyone who thinks about it from the start reaches more people and builds more robust websites. If you would like support with a project, you will find our offer under development.