Kolejność wizualna na stronie jest zgodna z kolejnością DOM

Logiczna kolejność kart jest ważna dla zapewnienia płynności obsługi klawiatury. Czytniki ekranu i inne technologie wspomagające poruszają się po stronie w kolejności DOM. Przepływ informacji powinien być logiczny.

Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź przez karty. Ogólnie zaznaczenie powinno znajdować się w kolejności czytania, od góry do dołu strony. W większości języków kierunek czytania jest od lewej do prawej. W niektórych, np. arabskim i hebrajskim, kolejność czytania przesuwa się od prawej do lewej.

Podczas oceny kolejności kart należy pamiętać o 2 głównych kwestiach:

  • Czy elementy w DOM są rozmieszczone w logicznej kolejności?
  • Czy treści poza ekranem są prawidłowo ukryte na pasku nawigacyjnym?

Zwróć uwagę na dziwne przeskakiwanie w nawigacji. Zwróć też uwagę na to, czy nie występują jakieś przeskakiwania poza ekran, gdy przewijanie do przodu powoduje wyświetlenie treści, które nie powinny być widoczne.

Więcej informacji znajdziesz w artykule Podstawy dostępu za pomocą klawiatury.

Rozwiązanie

Jeśli kolejność zaznaczenia wydaje się nieprawidłowa, zmień kolejność elementów w DOM, aby kolejność kart była bardziej naturalna.

Unikaj używania CSS do wizualnej zmiany pozycji elementów, ponieważ użytkownicy korzystający z technologii wspomagających osoby z niepełnosprawnością będą mieli niezrozumiałą nawigację. Zamiast używać CSS, przenieś element do wcześniejszej pozycji w DOM.

Jeśli klawisze sterujące nadal mają dostęp do treści poza ekranem, rozważ ich usunięcie za pomocą tabindex="-1".

Więcej informacji znajdziesz w artykule Zarządzanie fokusem za pomocą indeksu tabulacji.

Zasoby

Kod źródłowy dotyczący kolejności elementów na stronie zgodnej z kolejnością w DOM