blog na temat dostępności stron internetowych

Przejdź do głównej treści

Logiczna kolejność treści

Położenie treści strony na ekranie nie zawsze jest zgodne z kolejnością, w jakiej treść ta jest zamieszczona w kodzie HTML. Istnieje szereg właściwości CSS, za pomocą których twórcy stron mogą tę kolejność zmienić, np. float, position, flex-direction. W większości przypadków nie ma w tym nic złego – kolejność elementów w kodzie niekoniecznie musi ściśle odpowiadać ich położeniu na ekranie. Istnieje jednak jedna istotna zasada: treść strony musi być przedstawiona w logicznej kolejności zarówno wizualnie, jak i w kodzie.

Kolejność treści a technologie asystujące

Poszczególne elementy strony przedstawione są technologiom asystującym w kolejności, w jakiej występują w kodzie HTML, niezależnie od tego, jak wyświetlone są na ekranie. Dlatego bardzo ważne jest zamieszczenie treści w kolejności, która ma sens, gdy zawartość strony odczytywana jest od początku do końca, element po elemencie, linearnie. Jeśli tak jest, różnica pomiędzy położeniem danego elementu w kodzie a na ekranie nie musi być problematyczna. Spójrzmy na przykład na prostą sekcję zawierającą tekst i obrazek, wyświetlony po prawej stronie tekstu:

nagłówek 'Wiadomość dnia', z wyświetlonym poniżej paragrafem tekstu po lewej stronie, i obrazkiem po prawej stronie

<section class="clearfix">
  <h2>Wiadomość dnia</h2>
  <img src="[...]" alt="" style="float: right">
  <p>Lorem ipsum [...]</p>
</section>

Chociaż w kodzie strony obrazek zamieszczony jest przed tekstem, na ekranie wyświetlony jest za nim (po prawej stronie). Ta zmiana położenia nie będzie jednak miała znaczenia z punktu widzenia informacji przekazywanej w tej sekcji.
Czasem bywa jednak, że niezgodność kolejności w jakiej dana treść jest przedstawiona w kodzie, a wyświetlona na ekranie, sprawia problemy pewnym grupom użytkowników.

Przykłady nieprawidłowej kolejności treści w kodzie strony

Poniżej zamieściłam przykłady trzech błędów, które dość często można znaleźć na stronach internetowych.

Przykład 1 – formularz

Jednym z najczęściej spotykanych błędów z tej kategorii jest zamieszczanie instrukcji dotyczących formularza za formularzem, zamiast przed nim, np.

<form class="float--left">
  <label for="imie">Imię:</label>
  <input id="imie" name="imie" type="text">
  <label for="nazwisko">Nazwisko:</label>
  <input id="nazwisko" name="nazwisko" type="text">
  <label for="email">Email:</label>
  <input id="email" name="email" type="email">
  <label for="password">Hasło:</label>
  <input id="password" type="password" name="password">
  <input name="submit" id="submit" value="Rejestracja" type="submit">
</form>
<div class="float--right instructions"> 
  <ul>
    <li>pola email, hasło i nazwisko są obowiązkowe</li>
    <li>hasło powinno się składać z min. 8 znaków - 7 liter i jednej cyfry</li>
    <li>uwaga: rejestracja oznacza zgodę na warunki naszego <a href="/regulamin">regulaminu</a>.</li>
  </ul>
</div>

fragment strony internetowej, po lewej stronie zamieszczony jest formularz, a po prawej treść instrukcji formularza, wyróżniona wizualnie obramowaniem i znakiem wykrzyknika

Większość użytkowników nie będzie mieć problemu z poprawnym wypełnieniem tego formularza. Choć w kodzie strony instrukcje zamieszczone są za polami formularza, na ekranie wyświetlone są tuż obok i ze względu na ostylowanie są dość łatwe do zauważenia; dzięki temu przeciętny użytkownik będzie w stanie zapoznać się z nimi przed przystąpieniem do wypełniania formularza.

Zupełnie inaczej wygląda to jednak z punktu widzenia osób korzystających z czytnika ekranu. Niewidomi użytkownicy, którzy przystapią do wypełniania formularza, będą przechodzić od pola do pola, wprowadzając kolejne dane, aż dojdą do przycisku “Rejestracja”. Znakomita większość z tych osób założy, że jest to koniec formularza – zdrowy rozsądek podpowiada, że przycisk zatwierdzający formularz oznacza jego koniec. Instrukcje zamieszczone za tym przyciskiem pozostaną zatem niezauważone, pomimo że zawierają istotne informacje na temat formularza.

Tego typu instrukcje powinny być zawsze zamieszczone w kodzie przed formularzem, bądź też stanowić jego część, poprzez poprawnie oznaczone elementy i atrybuty, prawidłowo powiązane z odpowiednimi polami (więcej informacji na ten temat można znaleźć w artykule “Dostępne formularze – część 1 – etykiety i pola“). Zawsze dziwi mnie, że niektórym deweloperom trzeba to wyjaśniać – nie jest to przecież jakieś wymyślne wymaganie, a raczej logiczna, zdroworozsądkowa kolejność.

Przykład 2 – zajawki

Inny rodzaj błędu, z którym wielokrotnie się zetknęłam, występuje w tzw. zajawkach (ang. teaser). Często elementy opisywane przez dany nagłówek zamieszczane są w kodzie przed tymże nagłówkiem, zamiast po nim, np.

dwa panele wyświetlone jeden obok drugiego: każdy zawiera obrazek, pod którym kolejno wyświetlone są: przycisk Recenzja, tytuł filmu oraz jego opis

<h2>Dzisiejsze filmy</h2>
<section>
  <img src="img/mala-syrenka.jpg" alt="" />
  <button>Recenzja</button>
  <h3>Mała syrenka</h3>
  <p>Lorem ipsum...</p>
</section>
<section>
  <img src="img/egzorcysta.jpg" alt="" />
  <button>Recenzja</button>
  <h3>Egzorcysta</h3>
  <p>Lorem ipsum...</p>
</section>

Ze względu na to, jak elementy te są wyświetlone i ostylowane, przeznaczenie każdego z przycisków “Recenzja”, będzie dla większości widzących użytkowników oczywiste. Osobom posługującym się czytnikiem ekranu treść ta przedstawiona jest jednak zupełnie inaczej. Użytkownicy ci, chcąc zapoznać się z recenzją filmu “Mała syrenka”, wybraliby przycisk nr 2, gdyż znajduje się on za nagłówkiem “Mała syrenka”. Umieszczenie tych elementów w kodzie w kolejności przedstawionej powyżej jest nielogiczne i niepoprawne. Prawidłowa kolejność to:

<h2>Dzisiejsze filmy</h2>
<section>
  <h3 id="naglowek1">Mała syrenka</h3>
  <img src="img/mala-syrenka.jpg" alt="" />
  <p>Lorem ipsum...</p>
  <!-- warto też powiązać przyciski z odpowiednim nagłówkiem za pomocą ARIA -->
  <button aria-describedby="naglowek1">Recenzja</button>
</section>
<section>
  <h3 id="naglowek2">Egzorcysta</h3>
  <img src="img/egzorcysta.jpg" alt="" />
  <p>Lorem ipsum...</p>
  <button aria-describedby="naglowek2">Recenzja</button>
</section>

Przykład 3 – siatka (ang. grid)

Czasem błędy dotyczące nieprawidłowej kolejności elementów na stronie są spowodowane niewłaściwym rozmieszczeniem treści w kolumnach siatki, np.

<-- klasy siatki Bootstrap -->
<div class="row">
  <div class="col-sm-4">
    <ul>
      <li>Sklep A</li>
      <li>Sklep B</li>
      <li>Sklep C</li>
    </ul>
  </div>
  <div class="col-sm-4">
    <ul>
      <li>ul. Kolejowa 1</li>
      <li>ul. Główna 10</li>
      <li>ul. Warszawska 100</li>
    </ul>
  </div>
  <div class="col-sm-4">
    <ul>
      <li>9:00 - 19:00</li>
      <li>8:00 - 18:00</li>
      <li>10:00 - 22:00</li>
    </ul>
  </div>
</div>

treść wyświetlona w 3 kolumnach, jedna obok drugiej. Pierwsza zawiera listę sklepów, druga ich adresy, a trzecia ich godziny otwarcia

Na większych ekranach, gdy kolumny te są wyświetlone jedna obok drugiej, treść ta ma sens, i widzący użytkownicy nie powinni mieć problemu z odnalezieniem i zrozumieniem przekazywanej informacji – adres i godziny otwarcia każdego sklepu wyświetlone są w tej samej linii co jego nazwa.
Informacja ta przedstawiona jest jednak w nielogicznej kolejności z punktu widzenia osób posługujących się czytnikiem ekranu. Zamiast podać treść w podobny sposób, jak jest to zrobione dla osób widzących (nazwa sklepu nr 1, adres sklepu nr 1, godziny otwarcia sklepu nr 1, adres sklepu nr 2, adres sklepu nr 2, godziny otwarcia sklepu nr 2, itd.), najpierw podana jest lista wszystkich sklepów, następnie wszystkie adresy, a na koniec wszystkie godziny otwarcia.

Należy też zauważyć, że na telefonach treść ta będzie przedstawiona nieprawidłowo dla wszystkich użytkowników:

treść wyświetlona w 1 wąskiej kolumnie, zawierającej kolejno: listę sklepów, listę ich adresów, listę godzin otwarcia każdego z nich

Jak sprawdzić kolejność treści w kodzie?

Istnieje kilka sposobów na sprawdzenie, czy informacja przedstawiona jest w HTML w logicznej kolejności, np.:

  • jeśli ktoś ma zainstalowane narzędzia Web Developer w przeglądarce Firefox, może to zrobić poprzez wyświetlenie zlinearyzowanej wersji strony i sprawdzenie, czy przedstawiona w ten sposób treść ma sens, gdy czytana jest od początku do końca strony (pasek narzędziowy Web Developer -> Różne -> Przekształć w postać liniową)
  • innym sposobem jest wyłączenie arkuszy styli (pasek narzędziowy Web Developer -> CSS -> Wyłącz style -> Wszystkie style)
  • włączenie czytnika ekranu i wysłuchanie treści od początku do końca, przechodząc przez kolejne elementy strony
  • włączenie podglądu kodu strony (np. prawy przycisk myszy -> Pokaż źródło strony)

Wytyczne WCAG 2.0 a kolejność treści

Kryterium sukcesu 1.3.2 (poziom A) zawiera następującą rekomendację:

1.3.2 Zrozumiała kolejność: Jeśli kolejność, w jakiej przedstawiona jest treść, ma znaczenie dla zrozumienia treści, kolejność ta musi być możliwa do odczytania przez program komputerowy (Poziom A)

Choć kryterium sukcesu 1.3.2 koncentruje się na logicznej kolejności treści w kodzie strony, warto też rozważyć położenie poszczególnych elementów strony na ekranie.

Wróćmy na chwilę do przykładu nr 1. Jeśli poprawimy zamieszczony w nim kod i przeniesiemy instrukcje przed formularz, rozwiążemy problem, z którym borykały się osoby niewidome. Jeśli jednak instrukcje te nadal będą wyświetlone po prawej stronie formularza, osoby niedowidzące, posługujące się jednocześnie powiększaczem i czytnikiem ekranu (np. programem ZoomText), będą zdezorientowane, gdy kolejność odczytywanej treści nie będzie się zgadzać się z tym, co wyświetlone jest na ekranie. Różnica pomiędzy sekwencją w kodzie a na ekranie spowoduje też, że będzie im znacznie trudniej domyślić się, który element będzie odczytany jako następny, a co za tym idzie, na którym obszarze strony muszą się skoncentrować w następnej kolejności. Podobnie osoba posługująca się klawiaturą może nie być w stanie poprawnie przewidzieć, który element na stronie otrzyma fokus klawiatury jako następny.

Choć kwestie te nie są objęte wytycznymi WCAG 2.0 (krytycy WCAG 2.0 często wspominają, że dokument ten koncentruje się głównie na potrzebach osób niewidomych, zaniedbując użytkowników z innymi dysfunkcjami), warto mieć je na uwadze. Dlatego też na przykład wspomniane w przykładzie nr 1 instrukcje powinny być wyświetlone nad formularzem lub po jego lewej stronie (zgodnie z kierunkiem czytania w języku polskim).

Należy być też szczególnie ostrożnym w zmianie położenia elementów interaktywnych, gdyż może to spowodować problemy z logiczną kolejnością fokusa klawiatury.

Dodaj komentarz

Należy wypełnić wszystkie pola oznaczone asteryskiem (*).
Zanim komentarz zostanie opublikowany będzie musiał zostać zatwierdzony przez moderatora.

Możesz wykorzystać następujące elementy HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>