Angular Aria – nowy standard budowania komponentów z dostępnością cyfrową

W kilku poprzednich artykułach How to adapt applications for people with disabilities,  Digital Accessibility 2025, Building an Accessible Variant Selector omówiliśmy temat dostępności cyfrowej – czym jest ARIA, jakie ma zastosowania i w jakich sytuacjach jest szczególnie pomocna. W tym artykule przyjrzymy się nowej paczce Angular Aria, dostępnej od wersji 21 Angulara.

Nowa paczka – @angular/aria

Paczkę tę możemy zainstalować w naszych projektach za pomocą komendy:

npm install @angular/aria

@angular/aria to oficjalna biblioteka dostarczająca  tzw. headless accessibility primitives – czyli zestaw dyrektyw i wzorców interakcji zgodnych ze specyfikacją WAI-ARIA.

Zaznaczmy tutaj, że nie jest to zestaw gotowych komponentów UI – są to jedynie dyrektywy, które możemy na takowe komponenty/elementy HTML nakładać.

Przykład – Combobox

Weźmy za przykład komponent Combobox. Dotychczas musieliśmy zadbać ręcznie m.in. o:

– obsługę atrybutów ARIA takich jak role=”combobox” lub aria-expanded
– obsługę klawiszy: ArrowUp, ArrowDown, Enter, Escape
– synchronizację stanu z inputem
– zarządzanie focusem

Od teraz @angular/aria oferuje dyrektywy, które cały powyższy pakiet funkcji naniesie za nas. Spójrzmy na taki prosty przykład:

import { Combobox, ComboboxInput, ComboboxPopupContainer } from '@angular/aria/combobox';
import { Listbox, Option } from '@angular/aria/listbox';

<div ngCombobox>
  <input ngComboboxInput [(value)]="value" />

  <ng-template ngComboboxPopupContainer>
    <div ngListbox [(value)]="value">
      @for (opt of options; track opt) {
        <div ngOption [value]="opt">
          {{ opt }}
        </div>
      }
    </div>
  </ng-template>
</div>

Przy czym:
– ngCombobox – kontroler całego wzorca

– ngComboboxInput – zarządza inputem i klawiaturą

– ngListbox – popup z opcjami

– ngOption – pojedyncza opcja

Jak możemy zauważyć, odeszło nam wiele pracy oraz zmniejszyło się ryzyko wprowadzenia błędu.

Dostępne wzorce

W wersji 21 Angulara, Angular Aria dostarcza dyrektywy do 12 komponentów:

Angular Aria vs Angular Material

Gotowe komponenty UI dostarczane przez Angular Material mają już wbudowaną implementację dostępności. Korzystając z nich, nie musimy dodatkowo używać dyrektyw z Angular Aria.

Angular Aria jest natomiast przeznaczona dla sytuacji, w których budujemy własne komponenty i potrzebujemy pełnej kontroli nad strukturą HTML oraz stylami.

Kiedy używać Angular Aria?

Angular Aria sprawdza się najlepiej, gdy potrzebujemy dostępnych komponentów interaktywnych zgodnych z WCAG, ale z własnym, niestandardowym stylem, np.:
– podczas budowy design systemu
– gdy interfejs wymaga specyficznego zachowania, którego nie uzyskamy korzystając z gotowych rozwiązań

Kiedy nie używać Angular Aria?

Angular Aria nie będzie najlepszym wyborem w każdym przypadku:
– podczas korzystania z gotowych komponentów, jak Angular Material
– projektując proste elementy HTML – takie jak <button> lub <input type=”radio”/> mają swoje wbudowane atrybuty i dodawanie na nich dyrektyw z Angular Aria byłoby przerostem formy nad treścią

Podsumowanie

Angular Aria wprowadza systemowe podejście do dostępności w aplikacjach Angular. Zamiast ręcznie implementować atrybuty ARIA, obsługę klawiatury i zarządzanie fokusem, otrzymujemy gotowe, zgodne ze specyfikacją wzorce interakcji w postaci dyrektyw.

Nie jest to zamiennik Angular Material ani gotowa biblioteka komponentów UI. To narzędzie dla zespołów, które budują własne komponenty, design systemy lub aplikacje o wysokich wymaganiach dostępności.

Angular Aria zmniejsza ryzyko błędów, przyspiesza development i standaryzuje implementację WCAG w projektach Angularowych.

Można powiedzieć, że od wersji 21 dostępność przestaje być dodatkiem – staje się częścią architektury frameworku.

Oficjalny link do dokumentacji znajduje się tutaj.