Skip to main content
Computer with code structurePhoto by Clément Hélardot on Unsplash

Today, let’s continue with WCAG criterion 1.3.1 – let’s focus on lists.

Why is it worth grouping elements and how to do it?
The answer is quite trivial. By grouping certain elements, we know that they belong to a specific whole. We anticipate how many elements are in a given set. This structure creates a logical entity for us. Examples?
Shopping list – right from the start, we know the scope of our “undertaking.”
List of articles on accessibility – you immediately know how much you have to review and how much time you need (or rather can dedicate).

Lists can be ordered or unordered. How do we implement them?

Firstly – proper semantics.
First, we decide whether it is an ordered or unordered list.
Ordered list – `<ol>`
Unordered list – `<ul>`
Each subsequent element, a child of the list, will be our list item – <li>.

<p>Friday evening shopping list</p>
<ul>
<li>Lettuce</li>
<li>Bread</li>
<li>Water</li>
</ul>

Friday evening shopping list
* Lettuce
* Bread
* Water

We also have the option of using a definition list (`<dl>`), but it is no longer fully supported by all combinations of browsers and screen readers. In this case, it’s worth considering using a table, which we’ll discuss in the next article.

Link to a detailed description of the definition list: https://lnkd.in/dAEeCzxN
Link to the description of list types: https://lnkd.in/drAu2XVU
WCAG reference: https://lnkd.in/dKcSJw6d

Radosław Stachurski

Radosław Stachurski

Accessibility Specialist & WCAG 2.1 Auditor & Quality Assurance