WAI-ARIA: Role=Columnheader

A cell containing header information for a column.

Description

A cell containing header information for a column.

columnheader can be used as a column header in a table or grid. It could also be used in a pie chart to show a similar relationship in the data.

The columnheader establishes a relationship between it and all cells in the corresponding column. It is the structural equivalent to an HTML th element with a column scope.

Authors MUST ensure elements with role columnheader are contained in, or owned by, an element with the role row.

Applying the aria-selected state on a columnheader MUST not cause the user agent to automatically propagate the aria-selected state to all the cells in the corresponding column. An author MAY choose to propagate selection in this manner depending on the specific application.

While the columnheader role can be used in both interactive grids and non-interactive tables, the use of aria-readonly and aria-required is only applicable to interactive elements. Therefore, authors SHOULD NOT use aria-required or aria-readonly in a columnheader that descends from a table, and user agents SHOULD NOT expose either property to assistive technologies unless the columnheader descends from a grid.

NOte: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.

Screen Reader Support For Role=ColumnHeader

Role=ColumnHeader Example

HTML Example

<table summary="Marks of students for class IX"><tbody><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></tbody></table>

Note: Because cells are organized into rows, there is not a single container element for the column. The column is the set of gridcell elements in a particular position within their respective row containers.

Characteristics

Superclass Role

• cell
• gridcell
• sectionhead

Base Concept

• HTML th[scope=”col”]

Required Context Role

• row

Supported States and Properties

• aria-sort

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-colindex
• aria-colspan
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-readonly
• aria-relevant
• aria-required
• aria-roledescription
• aria-rowindex
• aria-rowspan
• aria-selected (state)

Name From

• contents
• author

Accessible Name Required

• True

Semantic HTML

Use the HTML <th scope=“col”> or <thead> tag.

<table>
<tr>
<th></th>
<th scope=”col”>Month</th>
<th scope=”col”>Savings</th>
</tr>
<tr>
<td>1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>

<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Janu(ary</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=columnheader.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=columnheader.