aria-level

Kiedy używać

Na role="heading" do deklarowania głębokości nagłówka — odpowiednik ARIA dla wyboru <h1>–<h6>. Domyślnie używaj natywnych elementów nagłówkowych; sięgaj po role="heading" + aria-level tylko wtedy, gdy potrzebujesz poziomu wyższego niż 6 lub gdy framework nie pozwala bezpośrednio użyć elementu nagłówkowego.

Dozwolone również na role="treeitem" (głębokość w drzewie, zaczynając od 1 dla elementów najwyższego poziomu) i na role="listitem" wewnątrz zagnieżdżonego role="list", gdy zagnieżdżenie nie wynika ze struktury DOM.

Jak się zachowuje

Wartość jest dodatnią liczbą całkowitą. Dla nagłówków wartości 1–6 odpowiadają <h1>–<h6>; wartości powyżej 6 są poprawne w ARIA, ale tylko nieliczne czytniki ekranu je odczytują — nie polegaj na tym, że poziom 7 zostanie ogłoszony jako taki.

Dla elementów drzewa poziom oznacza głębokość: korzeń drzewa to poziom 1, jego bezpośrednie dzieci to poziom 2 i tak dalej. Numer poziomu pozwala użytkownikowi czytnika ekranu zorientować się w hierarchii bez widzenia wcięć.

Atrybut nie zmienia stylowania wizualnego. Jeśli „nagłówek ARIA poziomu 4” ma wyglądać jak h4, styluj go samodzielnie.

Typowe błędy

• Używanie role="heading" plus aria-level="3" zamiast zwykłego <h3>. Natywny element daje ci rolę, poziom, domyślną nawigację klawiaturową i integrację z konspektem dokumentu — bezpłatnie.
• Ustawianie aria-level na elemencie bez role="heading", role="treeitem" lub role="listitem". Atrybut nie ma żadnego efektu na przykład na <button> lub <div> bez roli.
• Pomijanie poziomu — poziom 2 bezpośrednio po poziomie 4 dezorganizuje konspekt dokumentu i narusza audyty SC 1.3.1.
• Elementy treeitem z błędnym poziomem: każde dziecko elementu poziomu 2 musi mieć poziom 3. Błędy o jeden tutaj psują komunikaty „przeszedłem poziom wyżej” / „przeszedłem poziom niżej”.
• Wartości niecałkowite lub zerowe. Poprawne są tylko dodatnie liczby całkowite; aria-level="0" jest ignorowane.
• Zapominanie o aktualizacji aria-level przy przenoszeniu elementów w drzewie z obsługą przeciągania.

Przykład

<!-- Nagłówek głębszy niż h6 (rzadkie; potrzebne w złożonych konspektach) -->
<div role="heading" aria-level="7">Pod-pod-podsekcja</div>

<!-- Elementy treeitem wyrażają głębokość przez aria-level -->
<ul role="tree">
  <li role="treeitem" aria-level="1" aria-expanded="true">
    Dokumenty
    <ul>
      <li role="treeitem" aria-level="2">Faktury</li>
      <li role="treeitem" aria-level="2">Umowy</li>
    </ul>
  </li>
</ul>