Accessibility: the WCAG 2.2 checklist we apply to every template

An accessible website is one everyone can use: blind or partially sighted people with a screen reader, people who navigate with a keyboard, older people, and also someone reading your page in bright sunlight or one-handed on the train.

The reference rules are the WCAG 2.2 (Web Content Accessibility Guidelines), published by the W3C in October 2023. In France, the RGAA adapts them for public services and large companies. Since 28 June 2025, the European Accessibility Act extends obligations to many e-commerce services; micro-enterprises providing services are exempt, but their customers are not exempt from the difficulties.

Here is the list we apply to every template before publishing it. It covers level AA, the one legal obligations target.

Contrast

• Body text: at least 4.5:1 between text and background (criterion 1.4.3).
• Large text: 3:1 (24 px, or about 18.7 px bold).
• Interface elements: 3:1 for field borders, meaningful icons and the focus indicator (criterion 1.4.11).

How to check: the Chrome and Firefox inspectors show the contrast ratio of a selected text. Test the dark mode too if there is one.

Keyboard and focus

• Everything that works with a mouse works with a keyboard (2.1.1).
• Focus is always visible (2.4.7) and never hidden by a sticky header or a cookie banner (2.4.11, new in 2.2).
• Tab order follows reading order.
• A "Skip to content" link lets people jump over the menu.

How to check: unplug the mouse and go through the page with Tab, Shift+Tab, Enter, Space and Escape.

Touch targets

Criterion 2.5.8, new in WCAG 2.2, requires targets of at least 24 × 24 CSS pixels, or enough spacing around small targets. We aim for 44 pixels on main buttons: it is more comfortable and costs nothing.

Structure

• A single h1 per page, headings in order, never skipping a level for visual reasons.
• Identifiable regions: header, nav, main, footer.
• A declared language (lang="en") so screen readers pronounce words correctly.
• Links that make sense out of context: "See our prices" rather than "Click here".

Images

• Every informative image has alternative text saying what it brings, not describing it pixel by pixel.
• Decorative images have an empty alt, so they are skipped.
• No important text is baked into an image.

Forms

• Every field has a visible, associated label (label for). A placeholder is not enough: it disappears as soon as you type.
• Errors are announced as text, next to the field, and explain how to fix them.
• Common fields declare their purpose (autocomplete="email", tel) so browsers can fill them in.
• No cognitive test to log in (3.3.8, new in 2.2): pasting passwords and password managers must work.

Motion

• Animations respect the system setting "reduce motion" (prefers-reduced-motion).
• Nothing flashes more than three times per second.
• An automatic carousel has a pause button, or better, is not automatic.

Layout

• The page stays usable at 320 pixels wide without horizontal scrolling (1.4.10), which also corresponds to 400 % zoom.
• Text can be enlarged to 200 % without being cut off.

Tools

Automated tools such as axe or Lighthouse detect roughly a third of the issues: contrast, missing attributes, structure. They are essential but not enough. The rest is checked by hand: with a keyboard, with a screen reader (NVDA on Windows, VoiceOver on Mac and iPhone, TalkBack on Android), and by rereading alternative texts.

Every Forge template passes an axe audit without errors and a full keyboard walkthrough before it is published. If you find a defect, write to us: we fix the template, and the corrected version can be downloaded from your account.