WCAG 2.1. – kryterium 2.4.6 – Nagłówki i etykiety (Poziom AA)

Ponownie porozmawiamy o nagłówkach i etykietach w kryterium WCAG 2.4.6 Nagłówki i etykiety (poziom AA).

Wspominaliśmy już o roli nagłówków przy konstruowaniu struktury strony. Zwracaliśmy uwagę na fakt, że wielu użytkowników wykorzystuje je do efektywnego nawigowania po serwisach internetowych. W związku z tym istotne jest, aby nadawać nagłówkom treść, która jasno wyraża tematykę lub cel danej sekcji. Opisowy nagłówek to taki, który wyjaśni nam czego możemy szukać w danym fragmencie. Przy czym opisowy nie oznacza za długi. Czasem wystarczy jedno słowo, czasem kilka. Z pewnością unikajmy rozbudowanych zdań.

Czy to wszystko o czym mówi kryterium WCAG 2.4.6 na temat nagłówków?

Oczywiście, że nie. 🙂 Oprócz opisowych nagłówków musimy zadbać również o ich wygląd. Wizualnie nagłówki powinny wyróżniać się od innej treści. Z drugiej strony styl nagłówka nie powinien być wykorzystywany na przykład do pogrubienia jednego słowa, które nagłówkiem w rzeczywistości nie jest. Może to wprowadzić sporo zamieszania.

Temat nagłówków można jeszcze bardziej rozbudowywać, ale drugą częścią kryterium są etykiety. Są one niemniej ważne w kontekście zrozumienia tego, co autor chciał przekazać. Tym bardziej, jeśli na stronie jest formularz.

Jak opisywać etykiety

Etykieta podobnie jak nagłówek powinna jasno opisywać przeznaczenie danego pola formularza oraz informować do czego to pole służy.
Zobrazujmy to na przykładzie formularza. Jeśli na jego końcu mamy przycisk “Dodaj” to etykietą widoczną dla czytników ekranu nie powinno być “załaduj pliki”.

Dlaczego?

Ma to swoje podłoże w obsłudze komputera za pomocą poleceń głosowych. Osoba korzystająca z tej funkcji, będzie wydawała polecenie “Dodaj”, a narzędzie asystujące nie rozpozna danego elementu, ponieważ jego etykieta jest inna.

Co więcej, dobrą praktyką jest dodanie słowa “wymagane” w etykiecie przy polach, które są obligatoryjne. Z pewnością nie powinno używać się skrótów, które mogą pozostać niezrozumiałe. Należy również pamiętać, że nie tylko pola tekstowe wymagają opisowej etykiety. Zwróćmy uwagę także na radiobuttony oraz checkboxy.

Ostatnim przykładem dobrego użycia jest wykorzystanie nagłówka jako etykiety

Na początku mówiliśmy o tym, że nagłówki powinny dzielić stronę, artykuł na sekcje. A co gdybyśmy dodatkowo taką sekcję, tak zwany region, opatrzyli etykietą w formie nagłówka? Można do tego wykorzystać atrybut aria-labelledby i opisać nawigację lub inny uzupełniający punkt orientacyjny. I znowu zahaczamy o inne kryterium WCAG.

Co to oznacza dla nas, osób tworzących produkt cyfrowy?

Musimy projektować nasze rozwiązania tak, żeby były proste w odbiorze i zrozumiałe dla wszystkich. Zarówno dla osób z ograniczeniami kognitywnymi, osób starszych czy też początkujących użytkowników.