This section isn’t directly related to Bootstrap, but it’s useful to know about this technique if you want to adapt your site for the visually impaired. The WCAG specification, which describes HTML capabilities for accessibility, mentions working with tables.
There is a special attribute, scope, which allows you to directly associate table headers with rows. In the basic version of the attribute takes one of two values: col and row. The value col specifies the table headers, and row specifies the row header.
Screen readers will then be able to explicitly link table headers and their value.
<table class="table">
<thead>
<tr>
<th>№</th>
<th>Profession name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Frontend programmer</td>
<td>JavaScript is a programming language for frontend development. Programmers can use it to make sites dynamic and alive. It's the most popular and easiest language for beginners.</td>
</tr>
</tbody>
</table>
When using the scope attribute, it is possible to throw out unnecessary columns. They’re not needed when reading the table’s content using speech engines. In the current example, when using a screen reader, the first column will be the row header. I.e., the number 1. Once we are in the column with the occupation description and enable the read cell name function, we’ll get the answer that the item is located in the column named “Description” and the row named “1”. If the table is small, then there’s nothing wrong with this, but imagine if the user was in a table with a dozen different headers, sub-tables, and merged cells.
In this case, reading out the header of the row and column won’t give full information about what kind of data is in the cell. By setting the attribute scope="row"
for a cell within a row, we’re saying we want to use that name as the row header. Reworking the above example a little, the result is as follows:
<table class="table">
<thead>
<tr>
<th scope="col">№</th>
<th scope="col">Name of profession</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td scope="row">Frontend Programmer</td>
<td>JavaScript is a programming language for frontend development. Programmers can use it to make sites dynamic and alive. It's the most popular and easiest language for beginners.</td>
</tr>
</tbody>
</table>
Now, when reading a cell with a profession description, the screen reader will indicate that the row header is “Frontend Programmer”, and the title of the column is “Occupation Name”