Semantics

A cell containing header information for a column.

Additional info from the ARIA specification

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 the accessibility children of 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.

Abstract Role

  • StructureRepresents a non-interactive part of a page that organizes content into coherent units.

  • WidgetRepresents a focusable, interactive element.

May be an interactive Widget or non-interactive Structure, depending on the context.

Content Category

Only Used with Specific Parent Roles

This role must be a direct descendant of one of the following roles:

  • row

Allowed Descendants

Flow Children Allowed

No main, header, or footer element descendants allowed.

Usage

Allowed HTML elements

Implicit semantics

These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.

  • th­[scope=­col]

Explicitly allowed

  • th[role=columnheader]

Elements that can have any role

  • abbr[role=columnheader]
  • address[role=columnheader]
  • b[role=columnheader]
  • blockquote[role=columnheader]
  • canvas[role=columnheader]
  • cite[role=columnheader]
  • code[role=columnheader]
  • custom-element[role=columnheader]
  • data[role=columnheader]
  • del[role=columnheader]
  • dfn[role=columnheader]
  • div[role=columnheader]
  • em[role=columnheader]
  • figure[role=columnheader]
  • i[role=columnheader]
  • ins[role=columnheader]
  • kbd[role=columnheader]
  • mark[role=columnheader]
  • output[role=columnheader]
  • p[role=columnheader]
  • pre[role=columnheader]
  • q[role=columnheader]
  • samp[role=columnheader]
  • small[role=columnheader]
  • span[role=columnheader]
  • table[role=columnheader]
  • tbody[role=columnheader]
  • tfoot[role=columnheader]
  • thead[role=columnheader]
  • time[role=columnheader]
  • u[role=columnheader]
  • var[role=columnheader]