Open Bug 1619446 Opened 4 years ago Updated 2 years ago

Consider warning about explicit labels on elements where the label won't be reported by screen readers

Categories

(DevTools :: Accessibility Tools, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: Jamie, Unassigned)

Details

Welcome to the land of edgy controversy. I will be your host today.

While aria-label and aria-labelledby get exposed as the accessible name in all cases, they don't necessarily have the effect that authors often expect on divs, spans, table cells, list items, etc. For example, NVDA will read the content (not the label!) in all of the following cases:

<div aria-label="div label">div content</div>
<span aria-label="span label">span content</span>
<p aria-label="p label">p content</p>
<ul><li aria-label="li label">li content</li></ul>
<table role="table"><tr><td aria-label="td label">td content</td></tr></table>

The reasons for this are complicated. I went on an epic ramble about this on my blog a few years ago. Note also that there is a proposed spec change to prohibit labelling on such elements.

  1. I'm not yet sure what this warning should say. On principle, I want to say it shouldn't be screen reader centric, but on the other hand, this is a tool for authors, and authors want to understand the practical implications, not obscure a11y theory. Saying "Screen readers may not report this label" is much clearer to authors than "Elements which aren't interactive, control groups or landmarks shouldn't have a label".
  2. I do think it should be a warning, not an error. There are specialised cases where you might want to have a label which is different to the content to get a particular UX; e.g. the Twitter example I gave in my blog post above (though Twitter has since changed that implementation).
  3. This should only happen for explicit labels (aria-label, aria-labelledby), not when we calculate name from subtree.

We should also consider adding a suggestion for these cases, as I blogged in December of 2019: If you aria-label something, give it a role.

This is useful! I guess we can determine this from the JS side for the most part. And tweaking messaging/level for an audit here should not be difficult. Should be taken care of after fission or sooner.

Priority: -- → P2

I think this can be done by looking at both the role and the explicit-name object attribute. I can provide some links/guidance as to how NVDA handles this when/if that's helpful.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.