aria-current

Kiedy używać

Na jednym elemencie reprezentującym „gdzie jesteś” w zbiorze powiązanych elementów. Klasycznym przypadkiem jest aktywny link w nawigacji głównej: czytnik ekranu ogłasza „Cennik, bieżąca strona, link”, a użytkownicy widzący widzą wyróżniony element zgodny z tym komunikatem.

Inne częste przypadki:

• Bieżący krok w formularzu wieloetapowym lub kreatorze (aria-current="step").
• Dzisiejsza data w siatce kalendarza (aria-current="date").
• Aktywny okruszek nawigacyjny (aria-current="page").
• Aktualnie odtwarzana pozycja na liście odtwarzania (aria-current="true").

Różnice wobec powiązanych stanów:

• aria-current — „jesteś tutaj” wewnątrz nawigacji lub zbioru elementów. Stosowany na linkach i podobnych widżetach, które nie opierają się na selekcji.
• aria-selected — selekcja wewnątrz kontenera wyborowego (tablist, listbox, tree, grid). Selekcję zmienia użytkownik.
• aria-pressed — przycisk przełączający. Sam przycisk jest włączony lub wyłączony.
• aria-checked — pole wyboru lub przycisk radiowy. Niezależny wybór.

Jak utrzymywać synchronizację

Dozwolone wartości: "page", "step", "location", "date", "time", "true", "false". Wybierz najbardziej szczegółowy token — "page" dla linków nawigacyjnych, "step" dla kreatorów, "date" dla kalendarzy. "true" to ogólny zamiennik, gdy żaden inny nie pasuje. "false" (domyślne) oznacza „nie bieżący”; zwykle po prostu pomijaj atrybut przy elementach niebędących bieżącymi.

W menu nawigacyjnym dokładnie jeden link powinien w danym momencie mieć aria-current. Aktualizuj go po stronie klienta przy zmianie trasy; strony renderowane po stronie serwera mogą go renderować bezpośrednio w HTML.

Oznacz wizualnie bieżący element, aby użytkownicy widzący otrzymali tę samą wskazówkę. Typowy wzorzec: [aria-current="page"] { font-weight: 600; }.

Typowe błędy

• Ustawienie aria-current="true" na każdym linku nawigacyjnym lub na żadnym.
• Użycie aria-selected na linku nawigacyjnym — błędna semantyka; link nie jest opcją do wyboru.
• Zapominanie o aktualizacji aria-current po zmianie trasy po stronie klienta w aplikacji jednostronicowej.
• Stylowanie stanu aktywnego w CSS bez ustawiania aria-current. Czytniki ekranu nie ogłaszają nic wyróżniającego.
• Użycie aria-current="page" na przycisku, który nie jest linkiem nawigacyjnym.
• Ustawienie aria-current na kontenerze <nav> zamiast na konkretnym linku.

Przykład

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>