Migrating ngAria to modern Angular
ngAria added ARIA attributes automatically to common directives: aria-hidden for ng-show and ng-hide, aria-disabled for ng-disabled, aria-checked and others for ng-model, plus tabindex and keyboard support for ng-click. Modern Angular has no automatic equivalent.
What replaces it
| Option | When to choose it |
|---|---|
| Native HTML elements + attribute bindings | Buttons, inputs and labels carry most of the semantics; bind the rest with [attr.aria-...]. |
| Angular CDK a11y | Focus trap, focus monitor, live announcer and list key managers for custom widgets. |
| Angular Aria or Angular Material | Accessible patterns from the Angular team: headless directives (@angular/aria, introduced in Angular 21) or finished components. |
How to migrate it
- Run an automated accessibility check (axe or Lighthouse) on the legacy screens to record the baseline.
- Replace clickable divs and spans with real buttons and links when you migrate each template.
- For custom widgets, add roles, states and keyboard handling explicitly, or build them on the CDK.
Watch out. ngAria made ng-click on a div focusable and operable by keyboard. A (click) on a div in Angular does neither, so accessibility can regress silently during the migration.
Other libraries
- nvd3 / angular-nvd3 / D3 directives
- highcharts-ng
- ui-codemirror / ui-ace
- lodash / underscore in AngularJS code
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn