What does this accessibility issue mean?
Accessibility issue summary: Table has an incorrect scope attribute
Table scope attributes (for example, <th scope=”col”>) help screen readers understand the structure and meaning of a table so its content can be presented to users with visual impairments.
Table scope attributes of <th> elements should be valid — which is to say, table scope attributes should include a scope value of one of the following:
- <th scope=”row”>
- <th scope=”col”>
- <th scope=”rowgroup”>
- <th scope=”colgroup”>
Solution:
Ensure that the scope attribute is used correctly on tables.
Example HTML violation: Table has incorrect scope attribute (A11y Best Practice Violation)
<table>
<tbody>
<tr>
<th scope="column">Item</th>
<th scope="column">Price</th>
<th scope="column">Quantity</th>
</tr>
<tr>
<td>iPad</td>
<td>$399</td>
<td>10</td>
</tr>
</tbody>
</table>Reason for Violation:The scope attribute in the th elements is incorrectly set to 'column'. The correct value to provide column association is 'col'.To fix the above issue, we need to correct the scope attribute value to 'col'.
The corrected HTML is as follows:
How to fix "Table has incorrect scope attribute (A11y Best Practice Violation)" issue
<table>
<tbody>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
<tr>
<td>iPad</td>
<td>$399</td>
<td>10</td>
</tr>
</tbody>
</table>In this corrected code, the scope attribute is correctly set to 'col', providing proper association of table headers to columns for screen readers, thus improving the accessibility of the web page. Note that this is important to ensure that people who use screen readers are able to understand and navigate the table content efficiently.
