ARIA Roles Accessible Names Test - Part 3

Test cases: 16 passing, 36 failing (52 total)

This page contains test cases for validating accessible names for various ARIA roles. Each role section provides passing and failing examples to help with accessible name computation testing.

1. Meter (role="meter")

These tests validate accessible names for elements with role="meter". Meters are used to represent scalar measurements with a known range.

⚠️ Understanding the Meter Role

According to the WAI-ARIA specification, the role="meter" represents a scalar measurement within a known range, similar to an HTML <meter> element. Key implementation requirements include:

The meter must have an accessible name via aria-label or aria-labelledby
It should use aria-valuemin, aria-valuemax, and aria-valuenow to communicate its values
Optionally, aria-valuetext can provide a human-readable text alternative of the value
Visual presentation should indicate the meter's value within its range
The meter widget itself should not be focusable or interactive (it's a read-only indicator)

Important: While HTML provides a native <meter> element that should be used when possible, the ARIA meter role is needed when creating custom meter widgets or retrofitting existing elements.

Passing Examples

Meter with aria-label

This div with role="meter" has a descriptive aria-label providing an accessible name.

Meter with aria-labelledby

This div with role="meter" uses aria-labelledby to reference another element for its accessible name.

Disk Usage

<h4 id="disk-usage-label">Disk Usage</h4> <div role="meter" id="meter-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="disk-usage-label" aria-valuemin="0" aria-valuemax="100" aria-valuenow="65" aria-valuetext="65% used"> <div style="width: 200px; height: 20px; background-color: #eee; border-radius: 10px; overflow: hidden;"> <div style="width: 65%; height: 100%; background-color: #2196F3;"></div> </div> </div>

Failing Examples

Meter with No Accessible Name

This div with role="meter" lacks an accessible name, making it difficult for screen reader users to understand its purpose.

Meter with Empty aria-label

This div with role="meter" has an empty aria-label, which provides no accessible name.

Meter with Whitespace-only aria-label

This div with role="meter" has an aria-label with only whitespace, which provides no accessible name.

Meter with Punctuation-only aria-label

This div with role="meter" has an aria-label with only punctuation, which provides no meaningful accessible name.

Meter with Broken aria-labelledby

This div with role="meter" references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.

Meter with Empty Reference via aria-labelledby

This div with role="meter" references an element with no content via aria-labelledby, causing the accessible name computation to fail.

Meter with Whitespace-only Reference via aria-labelledby

This div with role="meter" references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.

Meter with Punctuation-only Reference via aria-labelledby

This div with role="meter" references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.

...

2. Toolbar (role="toolbar")

These tests validate accessible names for elements with role="toolbar". Toolbars are containers for groups of buttons or other interactive controls.

⚠️ Understanding the Toolbar Role

According to the WAI-ARIA Authoring Practices Guide (APG), the role="toolbar" is a container for grouping a set of commonly used controls. Key implementation requirements include:

The toolbar should have an accessible name via aria-label or aria-labelledby
It should contain buttons, toggle buttons, or other interactive controls
It may use aria-orientation to indicate its orientation (horizontal by default)
Keyboard support must allow navigation between items using arrow keys
Related items can be grouped using role="group" with proper labeling

Important: A toolbar is different from a menubar in that it is always visible and contains buttons, while a menubar contains dropdown menus. Toolbars are commonly used in document editing software, drawing applications, and other interfaces with many user actions.

Passing Examples

Toolbar with aria-label

This div with role="toolbar" has a descriptive aria-label providing an accessible name.

<div role="toolbar" id="toolbar-aria-label-pass" class="a11yTestPass" aria-label="Text Formatting" aria-orientation="horizontal"> <button aria-pressed="false" type="button">Bold</button> <button aria-pressed="false" type="button">Italic</button> <button aria-pressed="false" type="button">Underline</button> <span role="separator"></span> <button type="button">Left</button> <button type="button">Center</button> <button type="button">Right</button> </div>

Toolbar with aria-labelledby

This div with role="toolbar" uses aria-labelledby to reference another element for its accessible name.

Drawing Tools

<h4 id="drawing-tools-label">Drawing Tools</h4> <div role="toolbar" id="toolbar-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="drawing-tools-label" aria-orientation="horizontal"> <div role="group" aria-label="Shapes"> <button type="button">Rectangle</button> <button type="button">Circle</button> <button type="button">Line</button> </div> <span role="separator"></span> <div role="group" aria-label="Colors"> <button type="button">Red</button> <button type="button">Green</button> <button type="button">Blue</button> </div> </div>

Failing Examples

Toolbar with No Accessible Name

This div with role="toolbar" lacks an accessible name, making it difficult for screen reader users to understand its purpose.

<div role="toolbar" id="toolbar-no-name-fail" class="a11yTestFail" aria-orientation="horizontal"> <button type="button">Cut</button> <button type="button">Copy</button> <button type="button">Paste</button> <span role="separator"></span> <button type="button">Delete</button> </div>

Toolbar with Empty aria-label

This div with role="toolbar" has an empty aria-label, which provides no accessible name.

<div role="toolbar" id="toolbar-empty-label-fail" class="a11yTestFail" aria-label="" aria-orientation="horizontal"> <button type="button">New</button> <button type="button">Open</button> <button type="button">Save</button> <span role="separator"></span> <button type="button">Print</button> </div>

Toolbar with Whitespace-only aria-label

This div with role="toolbar" has an aria-label with only whitespace, which provides no accessible name.

<div role="toolbar" id="toolbar-whitespace-label-fail" class="a11yTestFail" aria-label=" " aria-orientation="horizontal"> <button type="button">Undo</button> <button type="button">Redo</button> <span role="separator"></span> <button type="button">Find</button> <button type="button">Replace</button> </div>

Toolbar with Punctuation-only aria-label

This div with role="toolbar" has an aria-label with only punctuation, which provides no meaningful accessible name.

<div role="toolbar" id="toolbar-punctuation-label-fail" class="a11yTestFail" aria-label="..." aria-orientation="horizontal"> <button type="button">Zoom In</button> <button type="button">Zoom Out</button> <button type="button">Fit</button> <span role="separator"></span> <button type="button">Fullscreen</button> </div>

Toolbar with Broken aria-labelledby

This div with role="toolbar" references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.

<div role="toolbar" id="toolbar-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-toolbar-id" aria-orientation="vertical"> <button type="button">Insert Image</button> <button type="button">Insert Table</button> <button type="button">Insert Chart</button> <span role="separator"></span> <button type="button">Insert Link</button> </div>

Toolbar with Empty Reference via aria-labelledby

This div with role="toolbar" references an element with no content via aria-labelledby, causing the accessible name computation to fail.

<span id="empty-toolbar-label"></span> <div role="toolbar" id="toolbar-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-toolbar-label" aria-orientation="horizontal"> <button type="button">Page Setup</button> <button type="button">Margins</button> <button type="button">Orientation</button> <span role="separator"></span> <button type="button">Size</button> </div>

Toolbar with Whitespace-only Reference via aria-labelledby

This div with role="toolbar" references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.

<span id="whitespace-toolbar-label"> </span> <div role="toolbar" id="toolbar-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-toolbar-label" aria-orientation="horizontal"> <button type="button">Bullets</button> <button type="button">Numbering</button> <button type="button">Indent</button> <button type="button">Outdent</button> </div>

Toolbar with Punctuation-only Reference via aria-labelledby

This div with role="toolbar" references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.

<span id="punctuation-toolbar-label">...</span> <div role="toolbar" id="toolbar-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-toolbar-label" aria-orientation="horizontal"> <button type="button">Header</button> <button type="button">Footer</button> <span role="separator"></span> <button type="button">Date</button> <button type="button">Time</button> </div>

3. Tree (treeview pattern)

These tests validate accessible names for elements with role="tree" and role="treeitem". Trees are hierarchical lists that allow users to navigate through and select nested content.

⚠️ Understanding the Tree Role

According to the WAI-ARIA Authoring Practices Guide (APG), a role="tree" represents a hierarchical list with nested groups that can be collapsed and expanded. Key implementation requirements include:

The tree container must have an accessible name via aria-label or aria-labelledby
It contains elements with role="treeitem"
Parent treeitems should use aria-expanded to indicate their state
Each treeitem may use aria-level, aria-setsize, and aria-posinset to define its position in the hierarchy
Only one treeitem should be in the tab sequence at a time
Keyboard navigation must allow for both vertical traversal and expanding/collapsing nodes

Important: Trees are often used for navigation menus, file systems, site maps, or other hierarchical data structures where users need to navigate through multiple levels of information.

Passing Examples

Tree with aria-label

This div with role="tree" has a descriptive aria-label providing an accessible name.

Documents

Reports

Projects

Project A

Project B

Presentations

Pictures

Music

<div role="tree" id="tree-aria-label-pass" class="a11yTestPass" aria-label="File Explorer" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Documents <div role="group"> <div role="treeitem" aria-level="2">Reports</div> <div role="treeitem" aria-expanded="true" aria-level="2">Projects <div role="group"> <div role="treeitem" aria-level="3">Project A</div> <div role="treeitem" aria-level="3">Project B</div> </div> </div> <div role="treeitem" aria-level="2">Presentations</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Pictures</div> <div role="treeitem" aria-expanded="false" aria-level="1">Music</div> </div>

Tree with aria-labelledby

This div with role="tree" uses aria-labelledby to reference another element for its accessible name.

Site Structure

Home

About Us

Products

Hardware

Software

Services

Contact

Blog

Support

<h4 id="site-structure-label">Site Structure</h4> <div role="tree" id="tree-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="site-structure-label" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Home <div role="group"> <div role="treeitem" aria-level="2">About Us</div> <div role="treeitem" aria-expanded="true" aria-level="2">Products <div role="group"> <div role="treeitem" aria-level="3">Hardware</div> <div role="treeitem" aria-level="3">Software</div> <div role="treeitem" aria-level="3">Services</div> </div> </div> <div role="treeitem" aria-level="2">Contact</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Blog</div> <div role="treeitem" aria-expanded="false" aria-level="1">Support</div> </div>

Treeitem with aria-label

This div with role="treeitem" has a descriptive aria-label providing an accessible name that enhances the default text content.

Executive Team

CEO

CFO

CTO

<div role="tree" aria-label="Organization Chart"> <div role="treeitem" id="treeitem-aria-label-pass" class="a11yTestPass" aria-label="Executive Team (7 members)" aria-expanded="true" aria-level="1">Executive Team <div role="group"> <div role="treeitem" aria-level="2">CEO</div> <div role="treeitem" aria-level="2">CFO</div> <div role="treeitem" aria-level="2">CTO</div> </div> </div> </div>

Failing Examples

Tree with No Accessible Name

This div with role="tree" lacks an accessible name, making it difficult for screen reader users to understand its purpose.

Tree with Empty aria-label

This div with role="tree" has an empty aria-label, which provides no accessible name.

Departments

Finance

Engineering

Teams

Locations

<div role="tree" id="tree-empty-label-fail" class="a11yTestFail" aria-label="" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Departments <div role="group"> <div role="treeitem" aria-level="2">HR</div> <div role="treeitem" aria-level="2">Finance</div> <div role="treeitem" aria-level="2">Engineering</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Teams</div> <div role="treeitem" aria-expanded="false" aria-level="1">Locations</div> </div>

Tree with Whitespace-only aria-label

This div with role="tree" has an aria-label with only whitespace, which provides no accessible name.

Years

2023

2024

2025

Quarters

Months

<div role="tree" id="tree-whitespace-label-fail" class="a11yTestFail" aria-label=" " tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Years <div role="group"> <div role="treeitem" aria-level="2">2023</div> <div role="treeitem" aria-level="2">2024</div> <div role="treeitem" aria-level="2">2025</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Quarters</div> <div role="treeitem" aria-expanded="false" aria-level="1">Months</div> </div>

Tree with Punctuation-only aria-label

This div with role="tree" has an aria-label with only punctuation, which provides no meaningful accessible name.

Settings

General

Security

Advanced

Themes

Extensions

<div role="tree" id="tree-punctuation-label-fail" class="a11yTestFail" aria-label="..." tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Settings <div role="group"> <div role="treeitem" aria-level="2">General</div> <div role="treeitem" aria-level="2">Security</div> <div role="treeitem" aria-level="2">Advanced</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Themes</div> <div role="treeitem" aria-expanded="false" aria-level="1">Extensions</div> </div>

Tree with Broken aria-labelledby

This div with role="tree" references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.

Folders

Inbox

Sent

Drafts

Labels

Tree with Empty Reference via aria-labelledby

This div with role="tree" references an element with no content via aria-labelledby, causing the accessible name computation to fail.

Projects

Active

Completed

Archived

Tasks

Team

<span id="empty-tree-label"></span> <div role="tree" id="tree-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-tree-label" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Projects <div role="group"> <div role="treeitem" aria-level="2">Active</div> <div role="treeitem" aria-level="2">Completed</div> <div role="treeitem" aria-level="2">Archived</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Tasks</div> <div role="treeitem" aria-expanded="false" aria-level="1">Team</div> </div>

Tree with Whitespace-only Reference via aria-labelledby

This div with role="tree" references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.

Components

Buttons

Forms

Cards

Layouts

Utilities

<span id="whitespace-tree-label"> </span> <div role="tree" id="tree-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-tree-label" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Components <div role="group"> <div role="treeitem" aria-level="2">Buttons</div> <div role="treeitem" aria-level="2">Forms</div> <div role="treeitem" aria-level="2">Cards</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Layouts</div> <div role="treeitem" aria-expanded="false" aria-level="1">Utilities</div> </div>

Tree with Punctuation-only Reference via aria-labelledby

This div with role="tree" references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.

...

Chapters

Introduction

Chapter 1

Chapter 2

Appendix

References

<span id="punctuation-tree-label">...</span> <div role="tree" id="tree-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-tree-label" tabindex="0"> <div role="treeitem" aria-expanded="true" aria-level="1">Chapters <div role="group"> <div role="treeitem" aria-level="2">Introduction</div> <div role="treeitem" aria-level="2">Chapter 1</div> <div role="treeitem" aria-level="2">Chapter 2</div> </div> </div> <div role="treeitem" aria-expanded="false" aria-level="1">Appendix</div> <div role="treeitem" aria-expanded="false" aria-level="1">References</div> </div>

Treeitem with Empty aria-label

This div with role="treeitem" has an empty aria-label, which overrides its text content and provides no accessible name.

Source Code

src

lib

tests

<div role="tree" aria-label="Project Structure"> <div role="treeitem" id="treeitem-empty-label-fail" class="a11yTestFail" aria-label="" aria-expanded="true" aria-level="1">Source Code <div role="group"> <div role="treeitem" aria-level="2">src</div> <div role="treeitem" aria-level="2">lib</div> <div role="treeitem" aria-level="2">tests</div> </div> </div> </div>

4. Accessible Names with Tabindex (Non-Standard Patterns)

These tests validate accessible names for elements that use tabindex to make them focusable, even when the ARIA role is incorrect or non-interactive. This tests whether screen readers can announce something meaningful when focusing these elements.

⚠️ Understanding Tabindex and Accessible Names

When elements have tabindex="0" or tabindex="-1", they become programmatically focusable, which means screen readers may announce them. Having an accessible name for these elements is important even if the role is incorrect or non-standard:

tabindex="0" adds the element to the tab sequence, allowing users to focus it with keyboard navigation
tabindex="-1" makes the element programmatically focusable but not in the tab sequence (usually for focus management)
Elements with incorrect or non-interactive roles still need accessible names when they're focusable
The lack of an accessible name on a focusable element can result in confusing or meaningless announcements

Important: While these tests validate accessible name computation, they do NOT represent best practices for ARIA usage. In production code, always use the correct ARIA roles that match the element's purpose and behavior.

Passing Examples

Tabindex="0" with aria-label on Non-Interactive Role

This div has a non-interactive role but is in the tab sequence and has an accessible name.

Tabindex="-1" with aria-label on Non-Interactive Role

This div has a non-interactive role but is programmatically focusable and has an accessible name.

Tabindex="0" with aria-labelledby on Non-Interactive Role

This div has a non-interactive role but is in the tab sequence and gets its accessible name from another element.

Important Information

This section contains critical information about the system.

<h4 id="section-heading">Important Information</h4> <div role="region" tabindex="0" id="tabindex-0-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="section-heading"> <p>This section contains critical information about the system.</p> </div>

Tabindex="-1" with Invalid Role but Accessible Name

This div uses an invalid ARIA role but has tabindex="-1" and an accessible name.

This element has an invalid role but is still programmatically focusable.

<div role="not-a-real-role" tabindex="-1" id="invalid-role-with-name-pass" class="a11yTestPass" aria-label="Custom Element"> <p>This element has an invalid role but is still programmatically focusable.</p> </div>

Failing Examples

Tabindex="0" with No Accessible Name

This div is in the tab sequence but lacks an accessible name, making it unclear to screen reader users what they're focusing on.

This group is focusable but has no accessible name.

<div role="group" tabindex="0" id="tabindex-0-no-name-fail"> <p>This group is focusable but has no accessible name.</p> </div>

Tabindex="-1" with No Accessible Name

This div is programmatically focusable but lacks an accessible name, making it unclear to screen reader users what they're focusing on.

This region is programmatically focusable but has no accessible name.

<div role="region" tabindex="-1" id="tabindex-n1-no-name-fail"> <p>This region is programmatically focusable but has no accessible name.</p> </div>

Tabindex="0" with Empty aria-label

This div is in the tab sequence but has an empty aria-label, providing no accessible name.

This element has no semantic role but is focusable with an empty accessible name.

<div role="none" tabindex="0" id="tabindex-0-empty-label-fail" class="a11yTestFail" aria-label=""> <p>This element has no semantic role but is focusable with an empty accessible name.</p> </div>

Tabindex="-1" with Whitespace-only aria-label

This div is programmatically focusable but has an aria-label with only whitespace, providing no accessible name.

This element has a presentation role but is focusable with a whitespace-only accessible name.

<div role="presentation" tabindex="-1" id="tabindex-n1-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <p>This element has a presentation role but is focusable with a whitespace-only accessible name.</p> </div>

Tabindex="0" with Punctuation-only aria-label

This div is in the tab sequence but has an aria-label with only punctuation, providing no meaningful accessible name.

This status region is focusable but has a punctuation-only accessible name.

<div role="status" tabindex="0" id="tabindex-0-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <p>This status region is focusable but has a punctuation-only accessible name.</p> </div>

Tabindex="-1" with Broken aria-labelledby

This div is programmatically focusable but references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.

<div role="complementary" tabindex="-1" id="tabindex-n1-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-label-id"> <p>This complementary section is focusable but has a broken aria-labelledby reference.</p> </div>

Tabindex="0" with Empty Reference via aria-labelledby

This div is in the tab sequence but references an element with no content via aria-labelledby, causing the accessible name computation to fail.

<span id="empty-tabindex-label"></span> <div role="contentinfo" tabindex="0" id="tabindex-0-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-tabindex-label"> <p>This contentinfo section is focusable but has an empty aria-labelledby reference.</p> </div>

Native Element with tabindex="-1" but No Accessible Name

This article element is programmatically focusable but lacks an accessible name.

This article is programmatically focusable but has no accessible name.

<article tabindex="-1" id="native-element-tabindex-n1-no-name-fail"> <p>This article is programmatically focusable but has no accessible name.</p> </article>