Jesteś tutaj:Strona główna / WCAG 2.0 Zasada 1: Percepcja / Wytyczna 1.3 Możliwość adaptacji / 1.3.2 Zrozumiała kolejność (A)

1.3.2 Zrozumiała kolejność (A) - WCAG 2.0

Wygląd każdej strony internetowej opisany jest odpowiednio w plikach CSS. Musimy pamiętać, że przekładając wizualnie elementy na stronie przy pomocy właściwości arkuszy styli musimy zadbać o to, aby miały sens po wyłączeniu styli lub gdy użytkownik korzysta z programu czytającego czy przemieszcza się po treści przy pomocy klawiatury.

Sekwencja nawigacji oraz czytania, określona za pomocą kolejności w kodzie HTML musi być logiczna i intuicyjna.
Zobaczmy przykład błędnej kolejności, zaczerpnięty z prawdziwego serwisu internetowego.

Widok na stronie (wizualnie jest wszystko w porządku)
Bieżące logowanie:                    13.03.2012, godz. 13:59,
Ostatnie udane logowanie:         13.03.2012, godz. 13:28,
Ostatnie nieudane logowanie:     12.03.2012, godz. 13:15,

Widok HTML i CSS

<style>
.ul_txt {float:left; list-style-type:none;}
.ul_val {float:left;  list-style-type:none;}
</style>

<ul class="ul_txt">
  <li>Bieżące logowanie:</li>
  <li>Ostatnie udane logowanie:</li>
  <li>Ostatnie nieudane logowanie:</li>
</ul>
<ul class="ul_val">
  <li>13.03.2012, godz. 13:59,</li>
  <li>13.03.2012, godz. 13:28,</li>
  <li>12.03.2012, godz. 13:15,</li>
</ul>

Na powyższym przykładzie doskonale widać, jak można użytkownikowi np. niewidomemu, korzystającemu ze screen readera skutecznie utrudnić prawidłowe odczytanie i zrozumienie informacji. Jak już wspominaliśmy program czytający przetwarza stronę www liniowo (upraszczając: tak, jakby wyłączyć w przeglądarce style). Zatem najpierw odczyta listę: Bieżące logowanie,  Ostatnie udane logowanie, Ostatnie nieudane logowanie, a dopiero potem daty wraz z godzinami. Czyli w kolejności w jakiej zostały umieszczone w kodzie HTML.

Powrót do: Wytyczna 1.3 Możliwość adaptacji