Scope Attribute Should Be Used Correctly On Tables Axe Rules

Trang chủ » Html Table Td Scope Col » Scope Attribute Should Be Used Correctly On Tables Axe Rules

Có thể bạn quan tâm

If you are using HTML5, check that the scope attribute is only being used on th elements. If you are using HTML 4, check that the scope attribute is only being used on th and td.

Finally, check that the value of the scope is either row or col, but nothing else.

Add scope attribute values to all th elements that do not have one.

The markup necessary to convey the relationship between header cells and data cells in data tables that are not complex can be accomplished using the scope attribute. The scope attribute tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header.

Applying the scope attribute to a table in markup looks like this:

Good Example

<table> <caption><strong>Greensprings Running Club Personal Bests</strong></caption> <tr> <th scope="col">Name</th> <th scope="col">1 mile</th> <th scope="col">5 km</th> <th scope="col">10 km</th> </tr> <tr> <th scope="row">Mary</th> <td>8:32</td> <td>28:04</td> <td>1:01:16</td> </tr> <tr> <th scope="row">Betsy</th> <td>7:43</td> <td>26:47</td> <td>55:38</td> </tr> <tr> <th scope="row">Matt</th> <td>7:55</td> <td>27:29</td> <td>57:04</td> </tr> <tr> <th scope="row">Todd</th> <td>7:01</td> <td>24:21</td> <td>50:35</td> </tr> </table>

Note that the top headers for Name, 1 mile, 5 km and 10 km are all marked up with th elements, as are the row headers for Mary, Betsy, Matt and Todd. Each of these header cells have also been given the scope attribute values of col or row depending on whether they are column or row header cells.

Từ khóa » Html Table Td Scope Col