EAA compliance for Angular: WCAG 2.1 AA checklist & fixes

What the EAA actually requires from a Angular site

Angular ships strong accessibility primitives through @angular/cdk/a11y and Angular Material, so under the EAA the obligation is mostly about not undermining them with custom directives and change-detection quirks. EN 301 549 conformance forces you to replace (click) directives on div elements with real buttons, and to fix live-region updates that zone.js batches so aria-live content is never actually announced. Because Angular is a client-rendered framework, an auditor evaluates the hydrated DOM, so the requirement centres on keyboard operability and reliable status announcements across change-detection cycles.

Angular is the enterprise and public-sector default, so an in-scope Angular application is frequently a large government portal, bank, or corporate service where the exposure is at the serious end of the scale. These operators face both the EAA and, for public bodies, the Web Accessibility Directive plus EN 301 549 procurement conditions, and the larger commercial ones sit squarely in the range of France's up-to-4%-of-turnover penalties. The upside is that these organisations typically have formal QA and accessibility processes, so failures tend to be specific regressions rather than wholesale neglect.

Remediation is done by the application's engineering team using Angular's own tooling: swap custom controls for native elements or Material components, and route status messages through LiveAnnouncer from @angular/cdk/a11y instead of raw property bindings. Add FocusTrap and FocusMonitor where dialogs and menus need them, enforce template a11y linting, and verify the Angular Material version in use is free of known accessibility bugs. In a large enterprise codebase this is planned, ticketed work, but the CDK primitives make each fix reliable and low-risk.

Top WCAG failures we see on Angular sites

Across hundreds of Angular scans, the same handful of issues show up over and over. None of them require ripping the theme apart — most are fixable in a few hours by someone comfortable in the platform's editor or template files.

• Custom directives skipping native semantics

  Wrapping a <div> in a (click) directive instead of using a <button> loses keyboard support and role.

  2.1.1, 4.1.2 — Level A

• Live region updates do not fire

  Property bindings into role="status" elements can be batched by zone.js and never announced.

  4.1.3 — Level AA

Concrete code fixes for Angular

Below are copy-paste fixes for the most common Angular issues. They assume you have access to your theme code or the platform's custom-code injection panel. If you cannot edit code directly, share these snippets with whoever maintains the site — every one of them is a ten-minute change.

import { LiveAnnouncer } from '@angular/cdk/a11y';

constructor(private live: LiveAnnouncer) {}

onSave() {
  this.live.announce('Profile saved', 'polite');
}

Tools and plugins worth installing first

• @angular/cdk/a11y — FocusTrap, LiveAnnouncer, FocusMonitor

• codelyzer template a11y rules

How to scan a Angular site without missing anything

Automated scanners catch about 30–40% of WCAG issues; the rest need manual review. The good news is that the 30–40% includes the most expensive issues to remediate after the fact, so an automated scan is the cheapest way to get unstuck. Run one before you change a line of theme code.

• Scan production builds; debug builds inject extra DOM that may confuse the audit.