New issue
Advanced search Search tips

Issue 717710 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: May 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug
Team-Accessibility



Sign in to add a comment

In table data span tag aria-label not being read by reader

Project Member Reported by evanward@google.com, May 2 2017

Issue description

Chrome Version:  58.0.3029.81 (64-bit)

What steps will reproduce the problem?
(1) Use screen reader on table data.

What is the expected result?
All text should be read.

What happens instead?
"Getting started" is read, but not the aria-label text in the Span tag.

Please provide any additional information below. Attach a screenshot if
possible.

Screenshot: https://screenshot.googleplex.com/R1Os92UQjr7.png

Sample html:
<html>
<body>
<table>
<tbody>
  <tr>
    <td>
      "Getting started"
      <span aria-label="open in new window"> open_in_new </span>
    </td>
  </tr>
</tbody>
</table>
</body>
</html>

 
Labels: Needs-Triage-M58
Status: WontFix (was: Unconfirmed)
Thanks for the html sample.

This is working as intended. It's a frequently confusing aspect of the ARIA standard but in this particular case, giving a name to a generic container like a span doesn't override the inner text.

I'll give you a couple of examples to explain the intuition behind it.

Example 1.

<span aria-label="Accessible Text">
  <a href="#">Link</a>
  <button>Button</button>
</span>

In this example, what would you like the aria-label to do? If you override the inner contents, then you've just made the link and the button inaccessible.

So what happens here is that browsers do expose "Accessible Text" to assistive technology, but virtually all screen readers ignore it because they ignore accessible names for generic grouping elements.

Another way to interpret this is that generic grouping elements in accessibility trees aren't named. Only leaf nodes in the tree, and grouping nodes with significant roles like headings and landmarks, are named.

Example 2.

<h1 aria-label="Accessible Text">
  Inaccessible Text
</h1>

In this example, the element has a meaningful role - heading - so most screen readers will consider the heading the "leaf node" in the tree, and they'll pay attention to the accessible name instead of the inner text. So this should do what you want.

Sign in to add a comment