Rola aria-*, role, tabindex

Rola aria-*, role, tabindex – podstawy dostępności komponentów

HTML posiada zestaw atrybutów, które umożliwiają tworzenie komponentów zrozumiałych i dostępnych dla użytkowników korzystających z czytników ekranu i nawigacji klawiaturą. W tej lekcji nauczysz się stosować trzy najważniejsze grupy znaczników dostępności: aria-*, role oraz tabindex.

Co to jest aria-*?

ARIA (Accessible Rich Internet Applications) to zestaw atrybutów, które pomagają opisać interfejs użytkownika dla technologii wspomagających, takich jak screen readery. Przykłady:

<button aria-label="Otwórz menu">
  <svg>...</svg>
</button>

Przycisk nie zawiera tekstu, ale czytnik ekranu przeczyta etykietę z aria-label.

Popularne atrybuty ARIA:

• aria-label – dodaje opis elementu (gdy nie ma tekstu widocznego)
• aria-hidden="true" – ukrywa element dla screen readerów
• aria-expanded – wskazuje stan rozwinięcia elementu (np. menu)
• aria-describedby – odwołuje się do innego elementu z opisem

Co to jest role?

Atrybut role pozwala określić funkcję elementu – szczególnie przydatny, gdy używasz nietypowych znaczników (np. <div> zamiast <nav>).

<div role="navigation">
  <a href="/strona1">Strona 1</a>
  <a href="/strona2">Strona 2</a>
</div>

Role najczęściej używane:

• banner – nagłówek strony
• navigation – menu
• main – główna treść
• dialog – modalne okno
• alert – ważny komunikat systemowy

Uwaga: jeśli używasz semantycznych znaczników (<nav>, <main> itd.), nie musisz dodawać role – one już mają przypisane role domyślnie.

Co to jest tabindex?

tabindex kontroluje kolejność, w jakiej użytkownik „przechodzi” przez elementy za pomocą klawisza Tab. Możesz ustawić:

• tabindex="0" – element dostępny w kolejności tabulacji (np. <div> bez niej nie byłby dostępny)
• tabindex="-1" – element pomijany przy nawigacji Tab, ale dostępny z JS

<div tabindex="0">Kliknij Enter, aby aktywować</div>

Bez tabindex taki <div> nie byłby w ogóle osiągalny z klawiatury.

Przykład komponentu z pełną dostępnością:

<button class="dropdown-toggle"
        aria-expanded="false"
        aria-controls="menu1"
        aria-label="Rozwiń menu"
        id="dropdown1">
  ☰
</button>

<ul id="menu1" role="menu" aria-hidden="true">
  <li role="menuitem"><a href="/profil">Profil</a></li>
  <li role="menuitem"><a href="/ustawienia">Ustawienia</a></li>
</ul>

Ten kod zawiera opis dla czytników, kontrolę stanu rozwinięcia i strukturę zgodną z rolami. Dzięki temu nawet osoba poruszająca się wyłącznie klawiaturą i czytnikiem ekranu zrozumie i obsłuży menu.

Dobre praktyki

• Używaj semantycznych znaczników HTML5 – one mają przypisane role automatycznie
• Dodawaj aria-label tam, gdzie nie ma widocznego tekstu
• Unikaj przesadnego stosowania role – tylko tam, gdzie to konieczne
• Nie zapominaj o tabindex dla interaktywnych <div> i <span>

🧠 Ćwiczenie

Stwórz dostępny przycisk rozwijający sekcję (accordion). Dodaj:

• aria-expanded, aria-controls
• tabindex dla nieinteraktywnych elementów
• opis za pomocą aria-label

Przetestuj komponent w JSFiddle oraz z użyciem Tab i Enter.

💡 Wniosek

To, co widzisz, to jedno – ale to, co słyszą i obsługują użytkownicy technologii wspomagających, to zupełnie inna historia. Dzięki aria, role i tabindex tworzysz strony dostępne, elastyczne i profesjonalne.