ARIA - Accessible Rich Internet Applications

ARIA (Accessible Rich Internet Applications) to zestaw atrybutów HTML, które pomagają uczynić dynamiczne treści i zaawansowane interfejsy dostępnymi dla technologii wspomagających. Możesz myśleć o ARIA jak o dodatkowych hieroglifach na ścianie świątyni - dopisują 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 role="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 Spację, i jest rozpoznawany przez czytniki ekranowe. ARIA stosuj tylko wtedy, gdy natywny HTML nie oferuje potrzebnej funkcjonalności.

ARIA Roles (Role)

Role definiują, czym jest element w kontekście interfejsu.

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

ARIA States & Properties

aria-label

Nadaje elementowi niewidoczną etykietę tekstową.

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

Łączy element z dodatkowym opisem.

1<label for="password">Hasło:</label>
2<input type="password" id="password"
3       aria-describedby="password-help">
4<p id="password-help">
5    Hasło musi mieć minimum 8 znaków, wielką literę i cyfrę.
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 ogłosi zmiany -->
2<div aria-live="polite" id="status">
3    <!-- Treść aktualizowana dynamicznie -->
4</div>
5
6<!-- Pilne powiadomienie -->
7<div aria-live="assertive" role="alert">
8    Sesja wygaśnie za 2 minuty!
9</div>

Wartości aria-live:

• off - brak ogłoszeń (domyślnie)
• polite - poczeka aż czytnik skończy bieżące zdanie
• assertive - przerwie bieżące czytanie natychmiast

aria-expanded

Informuje o stanie rozwijanych elementów.

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">Imię (wymagane):</label>
2<input type="text" id="name"
3       aria-required="true"
4       aria-invalid="false">
5
6<!-- Po błędnej 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" role="alert">
12    Podaj poprawny adres e-mail.
13</p>

Podsumowanie ARIA

Pamiętaj o pięciu zasadach ARIA:

1. Nie używaj ARIA, jeśli możesz użyć natywnego HTML
2. Nie zmieniaj semantyki natywnych elementów - nie dodawaj role="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ępną nazwę

Testowanie ARIA

Aby sprawdzić, czy Twoje atrybuty ARIA działają 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łącz monitor (lub zamknij oczy) i spróbuj nawigować po niej używając 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 mają poprawny focus trap?
• Czy stany (expanded, selected, pressed) są aktualizowane?
• Czy dekoracyjne elementy mają aria-hidden="true"?

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

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>ARIA - Atrybuty dostepnosci</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>ARIA w praktyce</h1>
11
12    <!-- aria-label -->
13    <section>
14        <h2>aria-label - niewidoczna etykieta</h2>
15        <button aria-label="Zamknij okno dialogowe" class="icon-btn">
16            <span aria-hidden="true">&#10005;</span>
17        </button>
18        <p>Przycisk z ikona X - czytnik powie "Zamknij okno dialogowe"</p>
19    </section>
20
21    <!-- aria-describedby -->
22    <section>
23        <h2>aria-describedby - dodatkowy opis</h2>
24        <label for="pwd">Haslo:</label>
25        <input type="password" id="pwd" aria-describedby="pwd-help">
26        <p id="pwd-help" class="hint">
27            Minimum 8 znakow, wielka litera i cyfra.
28        </p>
29    </section>
30
31    <!-- aria-expanded -->
32    <section>
33        <h2>aria-expanded - stan rozwijany</h2>
34        <button aria-expanded="false"
35                aria-controls="faq-answer"
36                onclick="toggleFaq(this)">
37            Czym jest skarabeusz?
38        </button>
39        <div id="faq-answer" hidden>
40            <p>Skarabeusz to swiety zuk w Starorzytnym Egipcie,
41               symbolizujacy odrodzenie i boga slonca Chepri.</p>
42        </div>
43    </section>
44
45    <!-- aria-live -->
46    <section>
47        <h2>aria-live - dynamiczne powiadomienia</h2>
48        <button onclick="updateStatus()">Sprawdz dostepnosc biletow</button>
49        <div aria-live="polite" id="ticket-status" class="status">
50            Kliknij przycisk, aby sprawdzic.
51        </div>
52    </section>
53
54    <!-- role="alert" -->
55    <section>
56        <h2>role="alert" - pilne powiadomienie</h2>
57        <button onclick="showAlert()">Wyswietl alert</button>
58        <div id="alert-area"></div>
59    </section>
60
61    <script>
62    function toggleFaq(btn) {
63        const expanded = btn.getAttribute('aria-expanded') === 'true';
64        btn.setAttribute('aria-expanded', !expanded);
65        document.getElementById('faq-answer').hidden = expanded;
66    }
67
68    function updateStatus() {
69        document.getElementById('ticket-status').textContent =
70            'Dostepne 15 biletow na wystawe Skarby Tutanchamona.';
71    }
72
73    function showAlert() {
74        const area = document.getElementById('alert-area');
75        area.innerHTML = '<div role="alert" class="alert">' +
76            'Uwaga! Wystawa zamyka sie za 30 minut.</div>';
77    }
78    </script>
79</body>
80</html>