WCAG 2.1 – kryterium 1.3.1 – Informacje i relacje: (poziom A) część 4
- Przejdź do artykułów z tagiem accessibility
- Przejdź do artykułów z tagiem akademiaWCAG
- Przejdź do artykułów z tagiem headers
- Przejdź do artykułów z tagiem landmarks
- Przejdź do artykułów z tagiem WCAG
- Przejdź do artykułów z tagiem WCAG 2.1
- Przejdź do artykułów z tagiem Web Content Accessibility Guidelines
Treść artykułu
Kolejny piątek kolejny post z serii Akademia WCAG
Rozpoczęliśmy opis kryterium 1.3.1 od struktury więc zamknijmy go klamrą i powiedzmy coś od nagłówkach i punktach orientacyjnych (z języka angielskiego landmarks).
Nagłówki w dostępności cyfrowej odgrywają ważną rolę. Są używane do organizowania i strukturyzowania treści, co pozwala na łatwiejsze poruszanie się po stronie, korzystanie z czytników ekranowych, a także na zrozumienie i szybkie zlokalizowanie istotnych informacji.
Oto kilka istotnych aspektów:
- Nagłówki powinny być używane zgodnie z hierarchią, zaczynając od nagłówka pierwszego poziomu (H1) (choć są od tego wyjątki).
- Nagłówki powinny być używane jako znaczniki semantyczne. Nie powinny być używane jedynie wizualnie jako zmieniane rozmiary czcionki lub stylizacje. W tym również puste nagłówki, które mogą wprowadzać osoby korzystające z czytników ekranowych w błąd i utrudniać zrozumienie strony.
- Powinny być używane w sposób spójny zarówno pod względem wyglądu, jak i znaczenia.
Z kolej punkty orientacyjne, zwane również landmarkami, to elementy HTML, które pozwalają na oznaczenie ważnych obszarów strony internetowej lub aplikacji.
Możemy je oznaczyć na dwa sposoby. Korzystając z elementów natywnych HTML lub dodając atrybut “role”. Poniżej krótki opis głównych landmarków:
header
(role="banner"
) – służy do oznaczenia nagłówka strony, w którym najczęściej znajduje się logo oraz menu nawigacyjne;nav
(role="navigation"
) – służy do oznaczenia menu nawigacyjnego, w którym powinny znajdować się linki do najważniejszych sekcji strony;main
(role="main"
) – służy do oznaczenia głównej treści strony. Elementmain
powinien zawierać wszystkie treści, które stanowią podstawowy cel strony;footer
(role="contentinfo"
) – służy do oznaczenia stopki strony, w której najczęściej znajdują się informacje kontaktowe, polityka prywatności, regulamin oraz… deklaracja dostępności 🙂.
Ważne jest, aby punkty orientacyjne były używane w sposób konsekwentny i zgodny z ich przeznaczeniem. Dzięki temu osoby korzystające z narzędzi wspierających, takich jak czytniki ekranu, mogą szybko i łatwo znaleźć poszukiwane informacje.
Na koniec podrzucamy dwa dodatki do przeglądarek pozawalające podejrzeć nagłówki i landmarki:
- HeadingsMap – szczególnie po ostatniej aktualizacji pozwalającej zobaczyć ukryte nagłówki (https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi)
- Landmark Navigation via Keyboard or Pop-up (https://chrome.google.com/webstore/detail/landmark-navigation-via-k/ddpokpbjopmeeiiolheejjpkonlkklgp)
Radosław Stachurski
Accessibility Specialist & WCAG 2.1 Auditor & Quality Assurance
Polecane artykuły
-
21.06.2024Akademia WCAG
WCAG 2.1 – Kryterium 3.2.5 – Zmiana na żądanie (Poziom AAA)
WCAG 3.2.5 Zmiana na żądanie (AAA) To kryterium jest rozwinięciem jednego z poprzednich opisywanych przez nas na blogu (3.2.2 –…
-
12.03.2024Akademia WCAG
WCAG 2.1 – kryterium 2.5.1 – Gesty dotykowe (Poziom A)
Przychodzimy do Was z dawką wiedzy o WCAG 2.5.1 gesty dotykowe do popołudniowej kawki lub innego gorącego napoju. Gotowi? Kryterium…
-
07.06.2024Akademia WCAG
WCAG 2.1 – Kryterium 3.2.3 – Spójna nawigacja (Poziom AA)
W kolejnym poście Akademii WCAG skupiamy się na kryterium WCAG 3.2.3 Spójna nawigacja (poziom AA). Co określa WCAG 3.2.3 spójna…