WCAG 2.1 – Criterion 1.3.1 – Information and Relationships: (Level A) Part 3

It’s Friday so let’s start with our schedule! Another WCAG-related post – the third part of criterion 1.3.1!

Speaking of schedules… What do you associate with a table? We mainly go with bus departure plans or a collection of interesting Excel data…
Talking to Łukasz Stanik, we learned that it’s very difficult for a blind person to imagine what a table is. They understand that it’s some kind of data set, but visually they don’t imagine it at all. It’s therefore very important for the table to be properly implemented so that the data contained in it can be processed correctly by screen readers, making it easy to compare and distinguish them.

What should a table contain besides being defined by the <table> tag or role=”table”?

For starters, we could use some kind of description. This allows the user to anticipate what type of data they will encounter. We can define it in a few ways. One of them is using the <caption> tag. It can be visible or hidden. To describe the table, we can also use a header (for example, <h2>) or a simple paragraph <p>, which will be linked to the table using the aria-describedby attribute if the description needs to be more detailed.

What’s next? We need to determine how many rows our table will have – using the <tr> tag, as well as table headers – using the <th> tag. If the data set has multiple headers, they should be differentiated using the scope attribute (“row” or “col”). Table data is marked using the <td> tag.

Example of a correctly implemented table with two headers:

<table class="table">
<caption class="h2">Schedule of posts on the Kinaole profile</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">14:00 - 16:00</th>
<td>None</td>
<td>None</td>
<td>Post</td>
<td>None</td>
<td>Post</td>
</tr>
[...]
</table>

Ready for the weekend? We are! All the best!