Techniki WAI-ARIA dla WCAG 2.1

The Web Accessibility Initiative's Accessible Rich Internet Applications Suite (WAI-ARIA, lub poprostu ARIA) - to jest zestaw narzędzi i wskazówek ułatwiających dostęp do treści internetowych i aplikacji.

Bez WAI-ARIA niektóre funkcje używane na stronach internetowych nie są dostępne dla niektórych użytkowników, zwłaszcza dla osób korzystających z czytników ekranu i osób, które nie mogą używać myszy. WAI-ARIA rozwiązuje te problemy, związane z dostępnością.

Warto pamiętać! Techniki WAI-ARIA nie zastępują technik ogólnych.

Aby poprawić dostępność strony internetowej, WAI-ARIA zapewnia opcję dodawania następujących informacji semantycznych, które są następnie ujawniane przeglądarce:

Role opisujące typ prezentowanego widżetu, takie jak "menu", "treeitem", "slider" i "progressbar";
Role opisujące strukturę strony internetowej, takie jak nagłówki, regiony, obszary wyszukiwania i obszary nawigacji;
Właściwości opisujące stan widżetów, takie jak „zaznaczone” dla pola wyboru, „haspopup” dla wyskakującego okienka, i „rozwinięte / zwinięte” dla węzła drzewa (rozwianego menu);
Właściwości przeciągania i upuszczania, które opisują źródła przeciągania i cele upuszczania;
Metoda zapewniająca nawigację za pomocą klawiatury.

Połączenie tych cech i informacji strukturalnych, przekazywanych przez strukturę DOM dokumentu HTML, umożliwia autorom tworzenie interoperacyjnego rozwiązania dla technologii wspomagających. (Źródło: WAI-ARIA Overview)

W szczególności WAI-ARIA zawiera zestaw atrybutów (ARIA role i ARIA atrybuty), które możemy dodać do elementów HTML, aby nadać im informacje semantyczne, które można odczytać za pomocą technologii asystujących (assistive technologies).

Role ARIA.

Role definiują typ elementu i wskazują cel, dla którego służy. Ten atrybut odpowiada na pytanie "Co to za element interfejsu?". Czy to tekst, przycisk, pole wyboru czy coś innego? Ustala oczekiwania dotyczące tego, co robi element, jak współdziałać z tym elementem i co się stanie, jeśli wejdziesz z nim w interakcję.

Używając hipertekstowego języka znaczników HTML, trudno jest przekazać technologiom wspomagającym cel określonej treści. Na przykład para tagów <div></div> definiuje tak zwany pojemnik, za pomocą którego można dalej umieszczać bloki na ekranie. Ale ten sam kontener <div> może być używany np. jako menu nawigacyjne. Rola ARIA wyraźnie wskazuje technologiom pomocniczym, że dany kontener należy do menu nawigacyjnego.

Przykład kodu:

 <div role="navigation">
    <h2>Menu<h2>
    <ul>
        <li><a href="page1.html">O nas</a></li>
        <li><a href="page2.html">Aktualności</a></li>
        <li><a href="page3.html">Kontakt</a></li>
        .....
    </ul>
</div>

Ważne rozumieć, że wiele elementów HTML (np. <main>, <nav>, <aside>) domyślnie definiuje punkty orientacyjne ARIA. Jeśli możesz użyć natywnego elementu HTML użyj go zamiast dodawać role ARIA.

Atrybuty ARIA.

Wszystkie atrybuty używają przedrostka aria- i dzielą się na dwie grupy: stany i właściwości.

Wartości atrybutów stanu zmieniają się w wyniku interakcji użytkownika. Wartości właściwości atrybutu z reguły pozostają niezmienione.
Przykładem atrybutu stanu ARIA jest aria-disabled. Ten atrybut wskazuje, że element jest widoczny, ale wyłączony, więc nie można go edytować ani w żaden inny sposób obsługiwać.

<input type="text" aria-disabled="true">

Oprócz ustawienia aria-disabled musi być zmieniony wygląd (np. wyszarzony), aby wskazać, że element został wyłączony.

Przykładem atrybutu właściwości jest aria-label i aria-labelledby. Najprostszym przykładem użycia tych atrybutów są przyciski. Z pewnością widziałeś przyciski, które nie zawierają żadnego tekstu, ale do interakcji z użytkownikiem zawierają obraz. W tym przypadku używane są atrybuty ARIA aria-label lub aria-labeledby, które umożliwią skorelowanie tekstu z jakimś elementem, za pośrednictwem którego użytkownik wchodzi w interakcję z interfejsem.

Zawartość atrybutu aria-label będzie wykorzystana jako dostępna nazwa dla elementu, w którym jest używana.

Przykład kodu:

<button aria-labelledby="button-label"> 
    <span id="button-label" hidden>Menu</span>
     <svg aria-hidden="true" focusable="false" width="24" height="28" viewBox="0 0 24 28">
        <!-- svg content -->
    </svg>
</button>

Podczas używania technologii asystujących, jeżeli na przycisku zostanie użyta etykieta aria-label, zawartość atrybutu zastąpi zawartość wewnątrz przycisku jako dostępną nazwę.

Używając aria-labelledby, możemy użyć naszego ukrytego fragmentu tekstu jako etykiety dla naszego przycisku

Przykład kodu:

<button class="menu-trigger" aria-label="Menu"> 
    <svg aria-hidden="true" focusable="false" width="24" height="28" viewBox="0 0 24 28">
        <!-- svg content -->
    </svg>
</button>

Role i atrybuty ARIA mają ogromny wpływ, gdy treść strony internetowej jest przetwarzana przez czytniki ekranu i inne technologie wspomagające. Wraz z rozprzestrzenianiem się technologii wspomagających musimy postrzegać integrację ARIA jako ciągłą praktykę.