ARIA - Accessible Rich Internet Applications

ARIA (Accessible Rich Internet Applications) to zestaw atrybutow HTML, które pomagają uczynic dynamiczne treści i zaawansowane interfejsy dostepnymi dla technologii wspomagajacych. Możesz myslec o ARIA jak o dodatkowych hieroglifach na ścianie swiatyni - dopisuja znaczenie tam, gdzie sam HTML nie wystarcza.

Pierwsza zasada ARIA

Nie używaj ARIA, jeśli możesz użyć natywnego HTML!

1<!-- ŹLE - ARIA na divie -->
2<div rolę="button" tabindex="0" aria-pressed="false">Kliknij mnie</div>
3
4<!-- DOBRZE - natywny HTML -->
5<button>Kliknij mnie</button>

Natywny

<button>

automatycznie jest fokusowalny, reaguje na Enter i Spacje, i jest rozpoznawany przez czytniki ekranowe. ARIA stosuj tylko wtedy, gdy natywny HTML nie oferuje potrzebnej funkcjonalnosci.

ARIA Roles (Role)

Role definiuja, czym jest element w kontekscie interfejsu.

1<!-- Landmark roles -->
2<div rolę="banner">Nagłówek strony</div>
3<div rolę="navigation">Nawigacja</div>
4<div rolę="main">Główna tresc</div>
5<div rolę="complementary">Sidebar</div>
6<div rolę="contentinfo">Stopka</div>
7
8<!-- Widget roles -->
9<div rolę="tablist">
10    <button rolę="tab" aria-selected="true">Zakładka 1</button>
11    <button rolę="tab" aria-selected="false">Zakładka 2</button>
12</div>
13<div rolę="tabpanel">Tresc zakładki</div>
14
15<!-- Alert rolę -->
16<div rolę="alert">Wystapil błąd! Sprawdz formularz.</div>

ARIA States & Properties

aria-label

Nadaje elementowi niewidoczna etykiete tekstowa.

1<!-- Przycisk z ikona - bez tekstu widocznego -->
2<button aria-label="Zamknij okno dialogowe">
3    <span class="icon">X</span>
4</button>
5
6<!-- Nawigacja z etykieta -->
7<nav aria-label="Nawigacja po wystawach">
8    <ul>...</ul>
9</nav>

aria-describedby

Laczy element z dodatkowym opisem.

1<label for="password">Haslo:</label>
2<input type="password" id="password"
3       aria-describedby="password-help">
4<p id="password-help">
5    Haslo musi mieć minimum 8 znaków, wielka litere i cyfre.
6</p>

aria-hidden

Ukrywa element przed czytnikami ekranowymi (ale pozostaje widoczny wizualnie).

1<!-- Ikona dekoracyjna - ukryta przed czytnikiem -->
2<button>
3    <span aria-hidden="true" class="icon">&#9776;</span>
4    Menu
5</button>
6
7<!-- UWAGA: Nigdy nie ukrywaj treści, która jest ważna! -->

aria-live

Informuje czytnik ekranowy o dynamicznych zmianach na stronie.

1<!-- Region live - czytnik oglosi zmiany -->
2<div aria-live="polite" id="status">
3    <!-- Tresc aktualizowana dynamicznie -->
4</div>
5
6<!-- Pilne powiadomienie -->
7<div aria-live="assertive" rolę="alert">
8    Sesja wygasnie za 2 minuty!
9</div>

Wartosci

aria-live

:

• off

  - brak ogloszen (domyślnie)

• polite

  - poczeka az czytnik skonczy biezace zdanie

• assertive

  - przerwie biezace czytanie natychmiast

aria-expanded

Informuje o stanie rozwijanych elementow.

1<button aria-expanded="false" aria-controls="menu">
2    Menu nawigacyjne
3</button>
4<nav id="menu" hidden>
5    <ul>
6        <li><a href="/">Strona główna</a></li>
7        <li><a href="/exhibitions">Wystawy</a></li>
8    </ul>
9</nav>

aria-required i aria-invalid

Walidacja formularzy.

1<label for="name">Imie (wymagane):</label>
2<input type="text" id="name"
3       aria-required="true"
4       aria-invalid="false">
5
6<!-- Po blednej walidacji -->
7<input type="email" id="email"
8       aria-required="true"
9       aria-invalid="true"
10       aria-describedby="email-error">
11<p id="email-error" rolę="alert">
12    Podaj poprawny adres e-mail.
13</p>

Podsumowanie ARIA

Pamietaj o piecciu zasadach ARIA:

1. Nie używaj ARIA, jeśli możesz użyć natywnego HTML
2. Nie zmieniaj semantyki natywnych elementow - nie dodawaj

   rolę="heading"

   do

   <p>

3. Wszystkie interaktywne elementy ARIA muszą być dostępne z klawiatury
4. Nie używaj

   aria-hidden="true"

   na fokusowalnych elementach
5. Wszystkie interaktywne elementy muszą mieć dostępna nazwe

Testowanie ARIA

Aby sprawdzic, czy Twoje atrybuty ARIA działaja poprawnie:

1. Czytnik ekranowy - użyj VoiceOver (Mac), NVDA (Windows) lub TalkBack (Android)
2. Chrome DevTools - zakładka Accessibility pokazuje drzewo dostępności
3. Rozszerzenia - axe DevTools, WAVE

Praktyczny test

Otwórz stronę, wyłacz monitor (lub zamknij oczy) i spróbuj nawigowac po niej uzywajac tylko klawiatury i czytnika ekranowego. Czy wszystkie informacje są dostępne? Czy wiesz, co robi każdy przycisk?

Checklist ARIA dla dewelopera

• Czy każdy interaktywny element ma dostępną nazwę (tekst, aria-label)?
• Czy dynamiczne zmiany na stronie są ogłaszane przez aria-live?
• Czy modalne okna dialogowe maja poprawny focus trap?
• Czy stany (expanded, selected, pressed) sa aktualizowane?
• Czy dekoracyjne elementy maja aria-hidden="true"?

ARIA to potężne narzędzie w rekach budowniczego dostępności - jak magiczne amulety, które dodają elementom ukryta moc rozumiana przez czytniki ekranowe. Ale tak jak amulety w świątyniach egipskich, trzeba ich używać z wiedza i umiarem. Nadmiar ARIA może bardziej zaszkodzic niż pomóc!