Przejdź do treści

Przed nami świąteczne szaleństwo zakupów i kolejki, w których będziemy musieli postać. Nikt chyba nie lubi stanąć w złej kolejce?! To ma też związek z dzisiejszym kryterium WCAG – 2.4.3 Kolejność fokusu.

Kolejność fokusu

Sam problem z odpowiednią kolejnością powiązany jest z wcześniej opisywanym przez nas kryterium WCAG – 1.3.2 Zrozumiała kolejność, a także z obsługą serwisów przez osoby korzystające z komputerów tylko za pomocą klawiatury. Przy czym poprzednio mówiliśmy o kolejności odczytu, a tym razem weźmiemy na warsztat porządek tabulacji aktywnych elementów na stronie.

Głównym założeniem jest to, aby każdy element przyjmujący fokus był przedstawiany w taki sposób, który pozwala zrozumieć treść. Zasadą jest, że wszystkie aktywne elementy na stronie powinny być fokusowane w kolejności od lewej do prawej, kolejno z góry na dół, przy czym mogą występować wyjątki. Najważniejszym jest, by kolejność nawigowania po aktywnych elementach była logiczna i intuicyjna dla Użytkownika.

Przykłady WCAG 2.4.3

Wyobraźmy sobie sytuację, że mamy okno logowania do serwisu bankowego. Naturalnym jest, że pierwszym występującym przyciskiem zaraz pod formularzem logowania po lewej stronie jest przycisk “wróć/anuluj”, a po prawej stronie przycisk “dalej/zaloguj”. W jaki sposób powinien wyglądać porządek tabulacji w tej sytuacji?
Według zasady wspomnianej powyżej, wydaje się, że przycisk po lewej… a co z podejściem biznesowym? W opisywanych sytuacjach warto zbadać potrzeby użytkowników i ten porządek zmienić. Wówczas, rekomendowalibyśmy aktywować jako pierwszy przycisk “dalej/zaloguj”.

Innym ciekawym przykładem odpowiedniej kolejności fokusu jest zadbanie o okna modalne. Należy pamiętać, że po jego otwarciu nawigacja powinna odbywać się tylko po aktywnych elementach w nim zawartych. Nigdy pod jego “spodem”. Według naszego doświadczenia to najczęściej pojawiający się błąd. Użytkownik może wtedy błądzić po stronie i nie wiedzieć, gdzie się znajduje. Co więcej, po zamknięciu takiego elementu należy pozostawić fokus na elemencie, który to okno wywołał.

Kolejność fokusu to bardzo obszerne kryterium, dla którego przykłady niepoprawnego użycia moglibyśmy mnożyć. Nie mamy jednak tu na to przestrzeni – jeśli mielibyście co do zagadnienia jakieś pytania, piszcie śmiało!

Małgorzata Szymczak

Małgorzata Szymczak

Accessibility Specialist & Junior Frontend Developer