Migrar ngAria a Angular moderno
ngAria agregaba atributos ARIA de forma automática a las directivas comunes: aria-hidden para ng-show y ng-hide, aria-disabled para ng-disabled, aria-checked y otros para ng-model, además de tabindex y soporte de teclado para ng-click. Angular moderno no tiene un equivalente automático.
Qué la reemplaza
| Opción | Cuándo elegirla |
|---|---|
| Native HTML elements + attribute bindings | Los botones, inputs y labels aportan la mayor parte de la semántica; enlaza el resto con [attr.aria-...]. |
| Angular CDK a11y | Trampa de foco, monitor de foco, anunciador en vivo y manejo de teclas en listas para widgets propios. |
| Angular Aria or Angular Material | Patrones accesibles del equipo de Angular: directivas sin estilos (@angular/aria, introducido en Angular 21) o componentes terminados. |
Cómo migrarla
- Ejecuta una revisión automática de accesibilidad (axe o Lighthouse) sobre las pantallas legacy para registrar la línea base.
- Reemplaza los div y span con clic por botones y enlaces reales cuando migres cada template.
- En los widgets propios, agrega roles, estados y manejo de teclado de forma explícita, o constrúyelos sobre el CDK.
Cuidado con. ngAria hacía que un ng-click sobre un div recibiera foco y funcionara con teclado. Un (click) sobre un div en Angular no hace ninguna de las dos cosas, así que la accesibilidad puede empeorar sin aviso durante la migración.
Otras librerías
- nvd3 / angular-nvd3 / D3 directives
- highcharts-ng
- ui-codemirror / ui-ace
- lodash / underscore in AngularJS code
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn