Tree items need a name

• Rule: axe/aria-treeitem-name
• Checks: ARIA treeitem nodes should have an accessible name
• WCAG: none; a best practice, not a WCAG success criterion
• Fix class: content: A fix needs authored text.

Who it affects

• People who use a screen reader or a braille display, most of them blind.
• People who control the page by speaking.

How to fix it

The item shows only an icon

Show the item’s name as text beside the icon, and hide the icon with aria-hidden="true". Where there is no room for text, name the item with aria-label.

<ul role="tree" aria-label="Project files">
  <li role="treeitem" aria-expanded="false" aria-selected="false" tabindex="0">
    <svg aria-hidden="true" focusable="false"><use href="#icon-folder"></use></svg>
    src
  </li>
  <li role="treeitem" aria-selected="false" tabindex="-1">
    <svg aria-hidden="true" focusable="false"><use href="#icon-file"></use></svg>
    README.md
  </li>
</ul>

The item’s text is hidden from assistive technology or drawn with CSS

Keep the text in the accessibility tree: take it out of any aria-hidden="true", display: none or visibility: hidden element, and write it into the markup rather than CSS content, which axe ignores.

Visible text outside the item names it

Point aria-labelledby at that text by its id.

Fixes that fail

Adding only a title attribute

axe accepts it, but it shows only while a mouse hovers, so keyboard, touch and voice control users never see the name.

Naming items by their type, such as “Folder” or “File”

People find an item by its own name. Use the file or node name; aria-expanded already tells people which items open.

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.