298199 - support abbr attribute for table headers

Status: NEW

(Core :: Layout: Tables, enhancement)

Description

[Jasper Bryant-Greene]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-NZ; rv:1.7.8) Gecko/20050613 Firefox/1.0.4
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-NZ; rv:1.7.8) Gecko/20050613 Firefox/1.0.4

Mozilla should support the abbr attribute for table headers.

For example if I define a table header as
<table>
<thead>
<tr>
<th scope="col" abbr="Ref">Payment Reference</th>
  . . . . .
</tr>
</thead>
  . . . . .
</table>

Mozilla should be able to replace "Payment Reference" with "Ref" when the window
is resized to a smaller size (e.g. small enough for the words to wrap)

Reproducible: Always

Comment 1

[Bernd]

it seems to be a valid requirement by html 4.01, however it will have low priority.

Comment 2

[Adrian Roselli]

Bumping this 17-year-old bug because it is late 2022 and instead of this:

<th abbr="Tuesday">
  Tu
</th>

I have to do this:

<th>
  <span aria-hidden="true">Tu</span>
  <span class="visually-hidden">Tuesday</span>
</th>

Along with this CSS:

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  white-space: nowrap; 
}

Essentially the accessibility tree should expose <th abbr="Tuesday">Tu</th> as a columnheader with name "Tuesday".

Comment 3

[James Teh [:Jamie]]

This bug was originally filed about visual support of the abbr attribute.

That said, Firefox already exposes <th abbr=...> as per the spec, at least for Windows and Linux:

Object attributes: "abbr"

In your example, Firefox exposes an abbr attribute with a value of "Tuesday". It's up to ATs as to whether/how they consume this. NVDA does not; see https://github.com/nvaccess/nvda/issues/3566.

It was specified this way so that ATs could still access the visually rendered content as well, which is important because we shouldn't assume that AT users always want the alternative version.

Your example is interesting because the abbr attribute is specified as providing a shorter version of the content, yet here, you use it to specify a longer version.

Note that exposing it as the accessible name wouldn't necessarily mean that screen readers will read it as a replacement for the content anyway. For example, if you use aria-label instead of abbr in your example, NVDA does not read "Tuesday" as the column header. The name does not (and should not) always trump the content. It depends on the role.

Comment 4

[Adrian Roselli]

If I understand this correctly, while Firefox exposes abbr as a an attribute on the node (using the accessibility inspector), it is not mapped to anything because HTML-AAM has no ARIA mappings, UIA does not map it at all, and the other platform APIs map it only as an object value with the exception of Apple.

At which point, it is up to NVDA / JAWS / Narrator / TalkBack / VoiceOver / Orca to choose how or if to expose it to users. This is compounded by the risks of overriding the visible text since, AFAIK, there is no existing method to toggle between them. Only macOS/VoiceOver (with any browser, but not iOS) uses the value in abbr.

The original visual-only aspect reason for filing this issue also appears to be moot given the lack of activity.

Is it worth exploring deprecation of this attribute?

As an aside, I am aware of the various levels of support for aria-label on column headings (example for readers: https://jsfiddle.net/u1jtm7oL/3/show), which is one reason I did not suggest it as a workaround for the issue I raise.

Comment 5

[James Teh [:Jamie]]

(In reply to Adrian Roselli from comment #4)

At which point, it is up to NVDA / JAWS / Narrator / TalkBack / VoiceOver / Orca to choose how or if to expose it to users.

That's correct, but that's true for any mapping. The object attribute mapping is specified for IA2 and ATK, so NVDA and Orca can use it if they wish. To be clear, there are plenty of other cases where something is mapped to an object attribute and clients choose to use those, so the problem isn't that object attributes are obscure or misunderstood or anything like that.

As an aside, I am aware of the various levels of support for aria-label on column headings (example for readers: https://jsfiddle.net/u1jtm7oL/3/show), which is one reason I did not suggest it as a workaround for the issue I raise.

I understand. However, your proposed solution was to map abbr to the accessible name, which is exactly what happens when you use aria-label. In other words, if aria-label doesn't work for clients, browsers exposing abbr as the accessible name won't work either.