2.4.3 Kolejność fokusu - poziom A

Jeśli strona może być nawigowana sekwencyjnie, a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, elementy muszą przyjmować fokus w takiej kolejności, żeby zachować sens i działanie treści.

O co chodzi w kryterium 2.4.3 Kolejność fokusu?

Gdy ktoś porusza się po stronie klawiszem Tab (albo czytnikiem ekranu), treść jest czytana i obsługiwana w pewnym porządku. Ten porządek ma znaczenie zwłaszcza wtedy, gdy strona ma układ wielokolumnowy, kafelki, panele boczne, filtry, rozwijane sekcje albo elementy, które pojawiają się dynamicznie.

W praktyce 2.4.3 wymaga, żeby kolejność przechodzenia fokusem była logiczna: najpierw to, co powinno być „pierwsze”, potem kolejne elementy - tak, żeby użytkownik nie trafiał na rzeczy wyrwane z kontekstu (np. przycisk bez opisu, pole formularza bez etykiety, akcje zanim pojawi się wyjaśnienie).

Najczęstsze powody niespełnienia kryterium 2.4.3

• Fokus skacze po stronie w kolejności wynikającej z układu technicznego, a nie z logiki treści. Użytkownik trafia np. do prawej kolumny, potem do stopki, a dopiero potem do treści głównej.
• Elementy w jednej sekcji są poprzestawiane w kolejności Tabem, więc sens instrukcji się rozsypuje: najpierw przyciski akcji, później dopiero informacja, czego te akcje dotyczą.
• Komponenty dynamiczne (np. rozwijane filtry, podpowiedzi, okna modalne) wprowadzają elementy do nawigacji w sposób chaotyczny: po otwarciu czegoś fokus nie trafia tam, gdzie użytkownik się spodziewa albo po zamknięciu nie wraca do sensownego miejsca.

Jak sprawdzić 2.4.3 na gotowej stronie

Odłóż mysz i przejdź stronę Tabem od początku. W każdym miejscu, gdzie musisz coś zrobić (menu, filtr, formularz, modal), zadaj sobie jedno pytanie: czy kolejność, w jakiej trafiam na elementy, jest logiczna i nie gubi kontekstu?

Znaczenie ma także to czy trafiasz na skiplinki jako pierwsze, na stronie zwykle później focus przechodzi na logo i po kolejnych elementach z górnej belki menu.

Jeśli w którymś momencie trafiasz na element bez kontekstu (bo dopiero później pojawia się wyjaśnienie albo elementy danej sekcji są porozrzucane), to masz konkretny sygnał, że kolejność fokusu nie zachowuje sensu lub funkcjonalności. 

Jak spełnić kryterium kolejność fokusu

Zacznij od prostej zasady redakcyjno-UX: ułóż stronę tak, jak ma być „czytana po kolei”. Jeśli coś ma być najpierw (nagłówek sekcji, instrukcja, pytanie), to elementy interaktywne związane z tym fragmentem (pole, przycisk, link) nie powinny pojawiać się przed nim w kolejności fokusu.

W formularzach pilnuj, żeby kolejność przechodzenia była zgodna z naturalnym wypełnianiem: etykieta i kontekst, potem pole, potem ewentualna podpowiedź i dopiero dalej kolejne pola. To samo dotyczy filtrów: najpierw nazwa filtra i jego kontrolka, a dopiero potem przyciski typu zastosuj/wyczyść.

Jeśli masz układ w kolumnach lub kafelkach, dąż do tego, żeby kolejność fokusu była przewidywalna (np. od góry do dołu, w obrębie treści głównej), a nie „przeplatana” między różnymi obszarami strony. W kryterium kluczowe jest to, że porządek ma zachować sens i funkcjonalność -nie chodzi o estetykę, tylko o możliwość zrozumienia i wykonania zadania.

Pełny tekst kryterium 2.4.3 Kolejność fokusu

Jeśli strona internetowa może być nawigowana sekwencyjnie , a kolejność nawigacji wpływa na zrozumienie lub funkcjonalność strony, komponenty przyjmują fokus w kolejności, dzięki której zachowany jest sens i funkcjonalność treści.

Źródło: https://www.w3.org/Translations/WCAG21-pl/#kolejnosc-fokusu

Chcesz wiedzieć więcej?

• 2.1.1 Klawiatura - poziom A
• 2.1.2 Brak pułapki na klawiaturę - poziom A
• 2.1.3 Klawiatura (bez wyjątków) - poziom AAA
• 2.1.4 Jednoznakowe skróty klawiaturowe - poziom A
• 2.2.1 Dostosowanie czasu - poziom A
• 2.2.2 Pauza, zatrzymanie, ukrycie - poziom A
• 2.2.3 Brak czasu - poziom AAA
• 2.2.4 Przerywanie - poziom AAA
• 2.2.6 Ostrzeżenie o limicie czasu - poziom AAA
• 2.3.1 Trzy błyski lub wartości poniżej progu - poziom A
• 2.3.2 Trzy błyski - poziom AAA
• 2.3.3 Animacja po interakcji (Poziom AAA)
• 2.4.1 Możliwość pominięcia bloków - poziom A
• 2.4.2 Tytuł strony - poziom A
• 2.4.3 Kolejność fokusu - poziom A
• 2.4.4 Cel łącza (w kontekście) - poziom A
• 2.4.5 Wiele dróg - poziom AA
• 2.4.6 Nagłówki i etykiety - poziom AA
• 2.4.7 Widoczny fokus - poziom AA
• 2.4.8 Lokalizacja - poziom AAA
• 2.4.9 Cel łącza (z samego łącza) - poziom AAA
• 2.4.10 Nagłówki sekcji - poziom AAA
• 2.5.1 Gesty wskazujące - poziom A
• 2.5.2 Rezygnacja ze wskazania - poziom A
• 2.5.3 Etykieta w nazwie - poziom A
• 2.5.4 Aktywowanie ruchem - poziom A
• 2.5.5 Rozmiar celu - poziom AAA
• 2.5.6 Równoległy mechanizm wprowadzania danych - poziom AAA