Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Call out missing accessible name on various ARIA roles

See original GitHub issue

Expectation: <div role="tree" /> triggers a violation because it does not have an accessible name. Example: https://2m3yw.csb.app/

Actual: No violation reported

Motivation:

role="tree" requires an accessible name in ARIA 1.1 and 1.2.
the tree will be announced as a generic “tree” in NVDA (possibly any screen reader) making it hard to understand the context of a specific item (though not as bad as having a generic <button />).
Required to add an audit to lighthouse (https://github.com/GoogleChrome/lighthouse/issues/11155)


axe-core version: 3.5.5
chrome extension: 4.5.3

axe-core should probably report any element without a name that has a role that requires an accessible name.

Rules to add: Taken from https://github.com/dequelabs/axe-core/issues/2421#issuecomment-667045198

~~aria-structure-name (NEW) - tag: best-practice (https://github.com/dequelabs/axe-core/pull/2431)~~
aria-dialog-name (NEW) - tag: best-practice #2609
~~aria-table-header-name (NEW) - tag: 1.3.1~~
aria-treeitem-name (NEW) - tag: best-practice #2615
aria-meter-name (NEW) - tag: sc111 #2607
aria-toggle-field-name: add “option” #2605
~~aria-input-field-name: add “radiogroup” - skipped, not sure if this is right~~
aria-command-name: (NEW) - tag: sc412 #2571
aria-progressbar-name (NEW) - tag: sc111 #2555
aria-tooltip-name (NEW) - tag: best-practice #2548
~~aria-marquee-name - not happening because of w3c/aria#1339~~

Issue Analytics

State:
Created 3 years ago
Comments:16 (15 by maintainers)

Top GitHub Comments

1reaction

WilcoFierscommented, Oct 28, 2020

Alrighty, update. I’ve discussed these new rules internally, and gained some new perspective on things. Here’s what has been decided:

aria-structure-name should not be added. There are lots of scenarios where grid, form, application, etc. do not benefit from having an accessible name. The only one that generally would benefit from getting an accessible name is table, since tables can be pulled up in a list in screen readers, but in that case the best practice should apply to all tables, not just ARIA tables. See #2603.
aria-table-header-name should not be added. Empty table headers are suspicious, but don’t necessarily mean there’s an accessibility issue. Instead of testing this just for ARIA, it would be better to have a role that checks all table headers, native or ARIA if they have an accessible name and flag it for as needs review if it does not have one. Here’s the ticket: #2604

That leaves a few more changes, see the top post of this issue.

1reaction

jlin95commented, Oct 15, 2020

I’d like to try tackling aria-treeitem-name (NEW) - tag: best-practice. @WilcoFiers just a heads up!

Top Results From Across the Web

Using ARIA: Roles, states, and properties - MDN Web Docs

Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM. Roles. Widget ...

ARIA14: Using aria-label to provide an invisible label ... - W3C

In some situations, elements can be given the attribute aria-label to provide an accessible name for situations when there is no visible label...

ARIA dialog and alertdialog must have an accessible name

Aria dialog elements must have discernible text that clearly describes the destination, purpose, function, or action for screen reader users. The Algorithm (in ......

Provide name, role, and value information | Digital Accessibility

Using WAI-ARIA provides a way to fill in missing accessibility information so that assistive technologies can recognize custom controls as controls and not...

Role does not support accessible name.

ARIA roles that prohibit accessible names must not have an accessible name defined using aria-label or aria-labelledby attributes. Purpose. Providing an ...