WCAG 2.1 – kryterium 1.3.1 – Informacje i relacje: (poziom A) część 2

Dzisiaj kontynuacja kryterium 1.3.1 WCAG – zajmijmy się listami.

Dlaczego warto grupować elementy i w jaki sposób zrobić?
Odpowiedź jest dość trywialna. Dzięki temu, że dane elementy są zgrupowane, wiemy że należą do pewnej całości. Spodziewamy się, ile elementów w danym zbiorze się znajduje. Struktura ta tworzy nam logiczną całość. Przykłady?

Lista zakupów – już na samym początku wiemy jak duże “przedsięwzięcie” nas czeka.

Lista artykułów na temat dostępności – od razu wiesz, ile masz do przejrzenia i jak dużo czasu musisz (a raczej możesz poświęcić 🙂 ).

Listy możemy mieć numerowane bądź też nie. W jaki sposób je implementujemy?

Po pierwsze – prawidłowa semantyka.
Najpierw decydujemy czy jest to lista numerowana czy nie.
Lista numerowana – <ol>
Lista nienumerowana – <ul>

Każdy kolejny element, potomek listy będzie już naszym elementem listy czyli – <li>.

….
<p>Lista zakupów na piątkowy wieczór</p>
<ul>
<li> Sałata 🙂 </li>
<li> Pieczywo </li>
<li> Woda </li>
</ul>
…

Lista zakupów na piątkowy wieczór
* Sałata 🙂
* Pieczywo
* Woda

Mamy też możliwość użycia listy definicji (<dl>), ale nie jest ona już w pełni wspierana przez wszystkie kombinacje przeglądarek i czytników ekranu. Warto w tym wypadku rozważyć użycie tabeli, o której opowiemy w kolejnym artykule.

Link do szczegółowego opisu listy definicji: https://lnkd.in/dAEeCzxN
Link do opisu rodzajów list: https://lnkd.in/drAu2XVU
Referencja do WCAG: https://lnkd.in/dKcSJw6d