heading
Oznacza element jako nagłówek. W pierwszej kolejności używaj znaczników <h1>–<h6> — niosą właściwą semantykę i poprawny poziom bez dodatkowej pracy. Po role="heading" sięgaj tylko wtedy, gdy nie możesz użyć natywnego elementu nagłówkowego.
Kiedy używać
Zawsze w pierwszej kolejności sięgaj po <h1> do <h6>. Natywny element nagłówkowy daje rolę, poziom i wbudowane style przeglądarki.
role="heading" jest właściwe tylko wtedy, gdy nie możesz użyć natywnego nagłówka — typowo wewnątrz systemu CMS z ograniczeniami, który renderuje cały tekst jako <p> lub <div>. Gdy tak robisz, MUSISZ ustawić aria-level na liczbę od 1 do 6 (lub wyższą, choć technologie wspomagające ignorują poziomy powyżej 6 w praktyce).
Nie pomijaj poziomów nagłówków: po <h2> nie powinien następować <h4> bez <h3> pomiędzy nimi. Użytkownicy czytników ekranu nawigujący po nagłówkach polegają na spójności konspektu dokumentu.
Typowe błędy
role="heading"bezaria-level. Rola wymaga podania poziomu.- Wizualnie wystylizowane „nagłówki” (duży pogrubiony tekst) opakowane w
<div>lub<span>bez roli nagłówka. Użytkownicy czytników ekranu całkowicie je pomijają. - Wiele elementów
<h1>na jednej stronie, gdy zamierzony jest tylko jeden główny nagłówek. Najlepsza praktyka to jeden<h1>na stronie, który nazywa główną treść. - Pomijanie poziomów — przeskoczenie z
h2doh4— psuje konspekt dokumentu. - Tekst dekoracyjny wystylizowany na nagłówek, ale nieistotny merytorycznie, oznaczony jako nagłówek. Dezorientuje nawigację czytnika ekranu.
Przykład
<!-- Preferowane -->
<h2>Jak złożyć skargę</h2>
<!-- Tylko gdy <h2> jest niemożliwe -->
<div role="heading" aria-level="2">Jak złożyć skargę</div>