About the Academy

EqualWeb Academy is a hands-on, example-driven guide to web accessibility. Instead of abstract checklists, every topic starts from a real defect and walks you to a working fix. For each issue you see the same shape: what the problem is, who it affects, the standards it maps to, a bad and a good example side by side, and the concrete steps to put it right.

The goal is to make accessibility something you can act on today. You should be able to land on any lesson, recognise the problem in your own product, and leave with markup you can paste in — not a stack of acronyms to look up later.

Who it's for

The Academy is written for everyone who shapes a digital product, not just specialists:

  • Developers who write the markup, components, and interaction logic.
  • Designers deciding colour, focus order, target sizes, and states.
  • QA and testers who need to know what to check and how to reproduce it.
  • Content authors writing headings, link text, and alternative text.
  • Product owners weighing which laws apply and what conformance means.

No prior accessibility expertise is assumed. Terms are defined the first time they appear, and each lesson stands on its own, so you can start wherever your current work is and follow the cross-links from there.

How it teaches

Every lesson follows one repeatable model so the format never gets in the way of the content. It opens with a plain-language problem statement — what breaks and who it shuts out. The example is then shown three ways in a tabbed panel: Bad (the defect, as escaped non-running code so it can't affect the page), Good (a live, working version you can focus and operate), and Code (the copyable markup). Each lesson closes with an ordered list of fix steps and a recap.

Every issue is tied to the standards taxonomy, so you can see exactly which success criteria and laws a fix satisfies — WCAG 2.2, EN 301 549, Section 508, ADA Title II, and the European Accessibility Act — usually all at once, because they share the same underlying requirements. Reusable building blocks live in the patterns library, so once you understand a fix you can grab the component without rebuilding it from scratch.

Built to be copied

Every example is real, semantic HTML — not pseudo-code. The Good demos on each page are live controls rendered by the same markup shown in the Code tab, so what you copy is exactly what you tested. Paste it straight into your project and adapt the labels.

How it's built

The Academy is deliberately buildless and framework-free. It is a static site of plain HTML, CSS driven by custom properties, and small amounts of progressive-enhancement vanilla JavaScript. There is no bundler, no transpiler, and no client-side framework: the pages work with JavaScript switched off, and the scripts only add conveniences such as theme switching, the mobile menu, tab panels, and copy buttons on top of content that already functions.

More importantly, the site is a reference implementation of its own subject. The techniques it teaches are the techniques it runs on:

  • Conformance to WCAG 2.2 Level AA, reaching AAA where it is feasible without compromising the content.
  • Full keyboard support with a visible skip link and managed focus.
  • Light, dark, and high-contrast themes chosen by the user and remembered between visits.
  • Right-to-left (RTL) layout support for bidirectional languages.
  • Respect for reduced-motion preferences and correct forced-colors (Windows High Contrast) handling.

Eating our own dog food

The site is held to the audits it teaches. Pages are checked against the same success criteria the lessons cover, so the example you read about and the page you are reading it on pass the same tests. If a technique can't survive shipping it here, it doesn't get taught.

How to use it

  1. Browse by topic in Learn to find the issue you're facing and follow its problem-to-fix walkthrough.
  2. Grab reusable markup from Patterns when you need a ready-made accessible component to drop into your project.
  3. Check which laws and success criteria apply in Standards to understand your conformance obligations.
  4. Switch the theme, change your browser zoom, and navigate with the keyboard alone to see the accessibility features described here working in real time.

Reference

More to dig into:

  • Glossary — plain-language definitions of the accessibility terms used across the Academy.
  • How to test — automated, keyboard, screen-reader and zoom checks you can run yourself.
  • WCAG 2.2 criteria index — every success criterion, filterable by principle and level.
  • Accessibility statement — how this site conforms to the standards it teaches.