blog na temat dostępności stron internetowych

Przejdź do głównej treści

Listy HTML

Powrót do podstaw HTML – przypomnienie, jakie elementy mamy do dyspozycji, by oznaczyć listy, jaka jest struktura tych elementów i jak należy je stosować zgodnie z zasadami dostępności opisanymi w wytycznych WCAG 2.0.

Rodzaje list

Specyfikacja HTML5 wyróżnia trzy rodzaje list:

  • uporządkowaną (ang. ordered list) – <ol>
  • nieuporządkowaną (ang. unordered list) – <ul>
  • opisową (ang. description list) – <dl>

Lista uporządkowana

Element <ol> służy do oznaczenia list, w których kolejność poszczególnych jej elementów ma znaczenie, inaczej mówiąc nie można zamienić kolejności, w jakiej są one podane bez zniekształcenia informacji, jaką lista ta przekazuje. Najczęściej uporządkowaną listę stosuje się do oznaczenia list numerowanych (np. do przedstawienia wyników pierwszej dziesiątki uczestników maratonu). Na stronach internetowych element <ol> jest najczęściej używany w takich elementach jak paginacja, okruszki, czy też w pasku postępu (ang. progress bar) w formularzu składającym się z kilku stron, np:

  1. dane osobiste
  2. adres
  3. płatność
  4. potwierdzenie transakcji

Każdy element listy <ol> oznaczony jest za pomocą elementu <li> (ang. list item):

<ol>
  <li>dane osobiste</li>
  <li>adres</li>
  <li>płatność</li>
  <li>potwierdzenie transakcji</li>
</ol>

Lista nieuporządkowana

Element <ul> przeznaczony jest do oznaczenia list, w których kolejność zawartych w niej elementów nie ma znaczenia (przykładem tego rodzaju listy jest lista zakupów). Na stronach internetowych najczęściej stosujemy element <ul> do grupowania linków w menu, czy też przycisków mediów społecznościowych:

Podobnie jak w przypadku list uporządkowanych, każdy element listy <ul> oznaczony jest przy pomocy elementu <li>:

<ul>
  <li><a href="[...]">O nas</a></li>
  <li><a href="[...]">Menu</a></li>
  <li><a href="[...]">Galeria</a></li>
  <li><a href="[...]">Kontakt</a></li>
</ul>

Zdania zawierające listę elementów oddzielonych przecinkami nie wymagają oznaczenia elementem <ul>:

<p>Trójmiasto składa się z: Gdańska, Gdyni i Sopotu.</p>

Lista opisowa (dawniej: lista definicji)

Tego typu lista składa się z par zawierających nazwę elementu oraz jego opis (np. lista definicji w słowniku – stąd dawna nazwa tego elementu). Na stronach internetowych tego typu listy używane są najczęściej do oznaczenia atrybutów artykułu (autor, data publikacji, kategoria, itp.) czy też danych kontaktowych:

Numer telefonu:
+48 123 456 789
+48 789 123 456
Email:
email@nazwa-firmy.pl
Twitter:
@nazwa_firmy

W odróżnieniu od listy uporządkowanej i nieuporządkowanej, lista opisowa składa się z elementów <dt> i <dd>:

<dl>
  <dt>Numer telefonu:</dt>
  <dd>+48 123 456 789</dd>
  <dd>+48 789 123 456</dd>
  <dt>Email:</dt>
  <dd>email@nazwa-firmy.pl</dd>
  <dt>Twitter:</dt>
  <dd>@nazwa_firmy</dd>
</dl>

Zagnieżdżanie list

Czasem elementy listy mogą zawierać podelementy, np.

Aby poprawnie oddać zależności między poszczególnymi elementami, należy listy odpowiednio zagnieździć (czyli zamieścić jedną wewnątrz drugiej). I tak kod dla powyższego przykładu powininen wyglądać następująco:

<ul>
  <li><a href="[...]">Nasz sklep</a></li>
  <li><a href="[...]">Moda damska</a></li>
  <li><a href="[...]">Moda męska</a></li>
  <li><a href="[...]">Moda dziecięca</a>
    <ul>
      <li><a href="[...]">Zimowa wyprzedaż</a></li>
      <li><a href="[...]">Promocja wiosenna</a></li>
    </ul>
  </li>
  <li><a href="[...]">Kontakt</a></li>
</ul>

Choć ten sam efekt wizualny można by osiągnać przy pomocy jednej listy i CSS (np. nadając elementom listy zawierającymi linki “Zimowa wyprzedaż” i “Promocja wiosenna” zwiększony margin-left), byłoby to niepoprawne rozwiązanie:

<!-- zły przykład -->
<ul>
  <li><a href="[...]">Nasz sklep</a></li>
  <li><a href="[...]">Moda damska</a></li>
  <li><a href="[...]">Moda męska</a></li>
  <li><a href="[...]">Moda dziecięca</a>/li>
  <li style="margin-left: 20px;" ><a href="[...]">Zimowa wyprzedaż</a></li>
  <li style="margin-left: 20px;"><a href="[...]">Promocja wiosenna</a></li>
  <li><a href="[...]">Kontakt</a></li>
</ul>

Związek rodzic-dziecko pomiędzy stronami “Zimowa wyprzedaż” i “Promocja wiosenna” a ich nadrzędną stroną “Moda dziecięca” w powyższym kodzie nie istnieje. Chociaż widzący użytkownicy zrozumieją tę zależność na podstawie wyglądu listy, osoby niewidome zostaną wprowadzone w błąd – tak skonstruowany HTML sugeruje, że wyprzedaż i promocja dotyczą pełnej oferty sklepu, a nie tylko jednego z działów.

Listy a dostępność

Tak jak pisałam już wcześniej (“Semantyczny HTML a dostępność“), użycie właściwych elementów do oznaczenia treści jest kluczowe dla zapewnienia dostępności stron internetowych. Poprawna struktura dokumentu HTML pozwala technologiom asystującym (takim jak czytniki ekranu) na przekazanie użytkownikom prawidłowej informacji o treści strony i zależnościach pomiędzy jej elementami.

Gdy lista oznaczona jest w kodzie za pomocą odpowiedniego elementu, czytnik ekranu jest w stanie nie tylko poinformować użytkownika, że dany fragment treści jest listą, ale także przekaże informację o tym, ile znajduje się w niej elementów. Dzięki temu osoby korzystające z czytników ekranu mogą szybko “przeskanować” daną stronę, w podobny sposób jak widzący użytkownicy są w stanie przelotnie spojrzeć na listę i niemal natychmiast oszacować, czy zawiera ona dużo elementów.

Dlatego nigdy nie należy “fałszować” list poprzez stosowanie nieprawidłowych elementów HTML, np:

1. dane osobiste
2. adres
3. płatność
4. potwierdzenie transakcji

<-- to nie jest lista! -->
<p>
  1. dane osobiste<br/>
  2. adres<br/>
  3. płatność<br/>
  4. potwierdzenie transakcji<br/>
</p>

1. dane osobiste

2. adres

3. płatność

4. potwierdzenie transakcji

<-- to też nie jest lista! -->
<p>1. dane osobiste</p>
<p>2. adres</p>
<p>3. płatność</p>
<p>4. potwierdzenie transakcji</p>

Warto też pamiętać, że czytniki ekranu posiadają skróty klawiaturowe przypisane do danych elementów HTML. Pozwala to na szybszą nawigację, np. użytkownicy NVDA mogą nacisnąć klawisz L by przeskoczyć do kolejnej listy, bądź też klawisz I, by przejść do następnego elementu listy. Dlatego też grupowanie linków i przycisków przy użyciu listy HTML ułatwia osobom korzystającym z czytników ekranu na szybkie pominięcie całych grup kontrolek, które w danym momencie ich nie interesują (np. przyciski mediów społecznościowych).

WCAG 2.0 a listy HTML

Kryterium sukcesu “1.3.1 Informacje i relacje” zawiera technikę H48, która odnosi się do list (“H48: Używanie ol, ul i dl do oznaczenia list lub grup linków”). W jej skład wchodzą następujące zalecenia:

  • jeśli dany fragment treści wygląda jak lista, to powinien być oznaczony przy pomocy elementu <ul>
  • jeśli dana treść ma wygląd listy numerowanej, powinna być ona oznaczona przy pomocy elementu <ol>
  • fragment treści przedstawiający terminy i ich opisy powininen zostać oznaczony przy pomocy elementu <dl>

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>