ARIA (Accessible Rich Internet Applications)

Pięć zasad używania ARIA

• Pierwsza zasada ARIA: nie używaj ARIA, jeśli istnieje natywny element HTML (button, nav, details).
• Nie zmieniaj natywnej semantyki bez potrzeby (np. <button role="heading">).
• Każdy interaktywny element z rolą ARIA musi być obsługiwalny klawiaturą.
• Nie ukrywaj fokusowalnych elementów przez role="presentation" ani aria-hidden="true".
• Każdy element interaktywny musi mieć dostępną nazwę (accessible name).

Najczęstsze błędy

Typowe błędy to aria-expanded niezgodne z widocznością panelu, nazwa dostępna niezgodna z widoczną etykietą oraz aria-hidden na fokusowalnym elemencie. Sprawdzaj drzewo dostępności i zachowanie komponentu, nie samą obecność atrybutów.

Przykład

Przykład kompletnego przełączania panelu: natywny button obsługuje Enter i Spację, a skrypt utrzymuje zgodność hidden i aria-expanded. W drzewie dostępności sprawdź nazwę przycisku, stan rozwinięcia i relację controls.

<button id="faq-toggle" type="button" aria-expanded="false" aria-controls="faq-panel">
  Pokaż odpowiedź
</button>
<div id="faq-panel" hidden>Treść odpowiedzi.</div>
<script>
  const toggle = document.querySelector('#faq-toggle');
  const panel = document.querySelector('#faq-panel');
  toggle.addEventListener('click', () => {
    const expanded = toggle.getAttribute('aria-expanded') === 'true';
    toggle.setAttribute('aria-expanded', String(!expanded));
    panel.hidden = expanded;
  });
</script>