Main content

columnheader

Characteristics

Superclass Role:

  • gridcell
  • sectionhead
  • widget

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-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-expanded (state)
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-readonly
  • aria-relevant
  • aria-required
  • aria-selected (state)

Name From:

  • contents
  • author

Accessible Name Required:

  • True

A cell containing header information for a column.

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" forms a relation between the 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).

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.

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

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>

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.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_COLUMNHEADER

UI Automation ControlType Property: 

  • DataItem

UI Automation AriaRole Property: 

  • columnheader
More in this category: « combobox checkbox »