Istotne obszary na stronach internetowych

Obszary i sekcje, które powtarzają się na poszczególnych podstronach, powinny być określone na poziomie kodu. Jeśli zastosujesz odpowiednie znaczniki HTML lub punkty orientacyjne ARIA, sprawisz, że użytkownicy czytników ekranu łatwo zidentyfikują te obszary.

Ogólnie omawiamy ten temat w artykule Istotne obszary (jako jeden z tematów o elementach, które tworzą dostępność cyfrową).

Wskazywanie istotnych obszarów za pomocą HTML i ARIA

Istotne obszary możesz określać zarówno za pomocą znaczników HTML (np. main, footer), jak i ról punktów orientacyjnych ARIA (np. role=”main”, role=”contentinfo”). Ich działanie dla użytkowników czytników ekranu jest porównywalne, ale zawsze pierwszym wyborem powinny być znaczniki HTML, a ARIA tylko w ostateczności (np. gdy nie masz możliwości zamiany kontenera <div> na <main> i łatwiej jest go rozszerzyć do formy <div role=”main”>).

Znacznik HTML	punkt orientacyjny ARIA	Opis
aside	complementary	pasek boczny, treść, która jest oddzielna w stosunku do treści głównej
footer	contentinfo	stopka strony
header	banner	baner
main	main	główna treść strony
nav	navigation	nawigacja po stronie, linki do innych stron

Czytniki ekranu obsługują również wskazywanie obszaru formularza (<form> lub role="form") oraz wyróżniającej się sekcji (<section> lub role="region").

Takie odpowiedniki nie występują jednak w każdym przypadku. Na przykład role=”application” nie ma swojego odpowiednika w HTML, a użycie tej roli może powodować nieprzewidziane problemy. Obszar określony w ten sposób, czytnik ekranu traktuje jako oddzielną aplikację z oddzielnym sposobem nawigacji, strukturą itp. ARIA należy stosować z ostrożnością i zawsze badać skuteczność jej wdrożenia.

Nazywanie powtarzających się typów istotnych obszarów

Niektóre obszary, na przykład banner, można użyć tylko raz na danej stronie. Aby odróżniać poszczególne obszary, na przykład nawigacyjne, opisz ich przeznaczenie za pomocą aria-label lub aria-labelledby, na przykład: