Lack of described data cells in <th> elements and elements with [role=”columnheader”/”rowheader”]
Google Lighthouse, reports <th>
elements and elements with [role = "columnheader" / "rowheader"]
that does not address enough data cells and therefore lowers the user experience.
How to pass data cell audits?
Let’s go through the example. For example, the table below contains a table header column. But there is no table data set that this refers to. In that coding, the header column represents “Marathon pace”.
<table> <caption>My marathon training log</caption> <thead> <tr> <th scope="col">Week</th> <th scope="col">Total miles</th> <th scope="col">Longest run</th> <th scope="col">Marathon pace</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>14</td> <td>5</td> </tr> <tr> <th scope="row">2</th> <td>16</td> <td>6</td> </tr> </tbody> </table>
Fixing this is possible by having a table data cell in the rest of the code. It is ‘’Marathon pace’’.
<table> <caption>My marathon training log</caption> <thead> <tr> <th scope="col">Week</th> <th scope="col">Total miles</th> <th scope="col">Longest run</th> <th scope="col">Marathon pace</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>14</td> <td>5</td> <td>4:45:00</td> </tr> <tr> <th scope="row">2</th> <td>16</td> <td>6</td> <td>4:33:00</td> </tr> </tbody> </table>
Test Your Website Issues
You can quickly analyze your site