Columnheader roles do not work with the abbr attribute

[7mary4]

TurboTax uses responsive pseudo-tables for product comparisons. We use the grid role to restore semantics. The column headers for the tables are filled with a short summary of price and ratings. This makes it difficult for the consumer to understand the features of the table when this extra content is announced prior to the cell's data.

The abbr attribute allows table headers to give a more relevant string before announcing the cells data. I've added the abbr attribute to the columnheader divs, but this is not being recognized by VoiceOver/Safari and the cells announce the full details of the page.

link to sample page: https://turbotax.intuit.ca/personal-tax-software/online-tax-software.jsp

I'm going to suggest changing the visual table header to be gridcells and include a hidden row with columnheaders. This isn't ideal, but it works. It would be more semantic to support the abbr attribute's functionality.

[scottaohara]

@jnurthen, I worked on two attribute draft proposals while trying to sort out how to resolve this issue. The attribute proposals are posted below so we can do an initial review prior to making PRs (as we had discussed). Attribute names are merely draft suggestions. I am sure other people have better naming ideas.

aria-headeralternative

Defines an alternative string value representative of the rowheader or columnheader element's visual text.

The purpose of aria-headeralternative is to provide users of assistive technologies a concise alternative to the calculated accessible name of a rowheader or columnheader for instances where those elements' names are overly verbose when navigating the cells of a table or grid.

Consider the following, where a columnheader contains a text string, as well as a button to sort the table by the column's cells.

<div role=table>
  <div role=row>
    <div role=columnheader aria-sort=none aria-headeralternative="Activities">
      My activities
      (all logged activity)
      <button>Sort</button>
    </div>
    <div role=columnheader aria-sort=none aria-headeralternative="Dates">
      My dates
      (month, day and year)
      <button>Sort</button>
    </div>
  </div>
  ...
</div>

The accessible names of each column header demonstrated in the markup snippet would be "My activities (all logged activity) Sort", and "My dates (month day and year) Sort" where subtree of the headers to be used. However, by specifying a concise string for the aria-headeralternative attribute, a concise representation of the header's purpose will be available to assistive technologies, without the need to overwrite the accessible name of the headers themselves.

User Agents MUST NOT replace the accessible name of a rowheader or columnheader with the value of aria-headeralternative. User Agents MAY provide a mechanism to convey the value of aria-headeralternative when a user is directly interacting with a rowheader or columnheader where the attribute is specified. User Agents MAY provide a mechanism to convey the full header text when a user is interacting with the cells within a column or row where a header alternative is providing a concise description of the header text.

aria-cellheaders

Identifies the element (or elements) that serve as the rowheader or columnheader to the current cell or gridcell.

The value of the aria-cellheaders attribute is a space-separated ID reference list that refers to one or more elements in the document by ID. The purpose of aria-cellheaders is to allow authors to create complex tabular data, and provide a mechanism to ensure that the most relevant table or grid headers will be associated with a cell or gridcell, where the visual presentation of the tabular data makes this association clear, but the headers are not otherwise programmatically associated.

Authors MUST NOT specify aria-cellheaders to be self-referential to their own IDs. If the tabular data is relatively simplistic in its structure, e.g., there are no instances of aria-colspan, aria-rowspan or host language equivalents, then specifying aria-cellheaders is likely not necessary.

[cookiecrook]

From the call: maybe aria-terselabel? Could potentially be used in more contexts, like table caption or fieldset legend… We'd need to clearly define (non-normatively) some behavior expectations in the known cases. E.g. full text alternative used when focus is on column header, but terse label could be used when focus is in the table contents and AT crosses a column boundary.

[cookiecrook]

FWIW +1 to aria-cellheaders (or just aria-headers) for HTML attribute parity. Though if we can keep the use case more broad than "tables only" that would be useful.

[scottaohara]

additional items for me, complete my testing of how header and abbr attributes presently work in tables.
Also record how aria-label works on column/row headers