Columnheader Role

Previous Checkbox role

To form a logical relation between the headers and the corresponding data in data tables <th> tags are used. These <th> tags are supported with HTML scope attribute. scope=”col” form a relation between column header and its corresponding data. In certain scenarios use of <th scope=”col”> might not be possible. Usage of role=”columnheader” helps in these situations. Role=”rowheader” does the same functionality for <th scope=”row”>. Screen readers like JAWS and NVDA will recognize the columnheader (role) and rowheader(role).

Example
<table summary=”Marks of students for class IX”>
<tr>
<td role=”columnheader”>Names</td>
<td role=”columnheader”>Mathematics</td>
<td role=”columnheader”>Physics</td>
<td role=”columnheader”>Chemistry</td>
</tr>
<tr>
<td role=”rowheader”>Student A</td>
<td>70</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td role=”rowheader”>Student B</td>
<td>60</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td role=”rowheader”>Student C</td>
<td>75</td>
<td>85</td>
<td>95</td>
</tr>
</table>
Next Combobox role