Add a 'scope' attribute to <th> tags #2021
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The following changes are implemented
Add a 'scope' attribute to tags.
Changes in the user interface:
Better support for screen readers. This increases the accessibility of tables to visually impaired users.
Checklist when submitting a final (!draft) PR
Reasoning
Associating
<table>
headers, i.e.<th>
elements, with their<td>
cells enables screen readers to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.There are two ways of doing it:
scope
attribute to<th>
headers.id
attribute to<th>
headers and a headers attribute to every<td>
element.It is recommended to add
scope
attributes to<th>
headers whenever possible. Use<th id="...">
and<td headers="...">
only when<th scope="...">
is not capable of associating cells to their headers. This happens for very complex tables which have headers splitting the data in multiple subtables. See W3C WAI Web Accessibility Tutorials for more information.