Rola Punkt orientacyjny

`region`

Ogólny punkt orientacyjny dla treści, która nie pasuje do banner, main, navigation, complementary ani contentinfo — ale jest wystarczająco ważna, by do niej nawigować. Element <section> staje się punktem orientacyjnym region wtedy i tylko wtedy, gdy ma dostępną nazwę.

Kiedy stosować

Dla istotnej sekcji strony, która nie pasuje do innego punktu orientacyjnego i do której użytkownicy czytników ekranu powinni móc przejść bezpośrednio: szyna „Polecane produkty”, bieżący krok formularza wieloetapowego, region transkrypcji czatu wewnątrz większej aplikacji.

Element <section> jest eksponowany jako punkt orientacyjny region TYLKO wtedy, gdy ma dostępną nazwę (aria-label lub aria-labelledby). Element <section> bez nazwy to jedynie ogólna grupa — bez ekspozycji jako punkt orientacyjny. Jest to celowe: zbyt wiele punktów orientacyjnych sprawia, że menu punktów orientacyjnych staje się bezużyteczne.

role="region" na elemencie <div> działa tak samo — wymagana jest nazwa.

Kiedy stosować region zamiast group

Zastosuj `role="region"` (lub `<section aria-label>`)	Zastosuj `role="group"`
Główna sekcja strony uzasadniająca nawigację po punktach orientacyjnych	Skupisko powiązanych kontrolek bez statusu punktu orientacyjnego
Jedna lub dwie na stronę	Może ich być wiele na stronie
Zawsze ma dostępną nazwę	Nazwa opcjonalna

W razie wątpliwości: należy zadać pytanie „czy chcę, żeby użytkownik czytnika ekranu mógł przejść bezpośrednio tutaj?”. Jeśli tak — region. Jeśli nie — group.

Typowe błędy

Element <section> bez aria-label lub aria-labelledby. Nie jest punktem orientacyjnym; opakowanie nie wnosi nic do dostępności.
Oznaczanie każdego elementu <section> jako region. Zalewa menu punktów orientacyjnych i rozmywa wartość każdego z nich.
aria-label="Section" — bez znaczenia. Etykieta powinna opisywać, co wyróżnia tę sekcję.
Używanie role="region" dla paska bocznego — to jest complementary. Należy wybrać najbardziej specyficzny punkt orientacyjny.
role="region" na opakowującym <div> I na wewnętrznym elemencie <section> — zduplikowane punkty orientacyjne dla tej samej treści.

Przykład

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>