ARIA Roles Accessible Names Test

This page contains test cases for accessible names in ARIA role elements according to the WCAG accessible name computation algorithm. The test cases include passing and failing examples organized by role type.

1. Combobox (role="combobox")

These tests validate accessible names for elements with role="combobox" according to the WAI-ARIA Authoring Practices Guide.

Passing Examples - Combobox

Editable Combobox with Properly Labeled Input

This combobox has an input with a properly associated label that serves as its accessible name.

Search products

<label id="combobox-input-label" for="combobox-input-pass">Search products</label> <div class="combobox-wrapper"> <input type="text" id="combobox-input-pass" class="a11yTestPass" role="combobox" aria-controls="listbox-id" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-id" role="listbox" style="display: none;"> <div role="option" id="option-1">Product A</div> <div role="option" id="option-2">Product B</div> </div> </div>

Failing Examples - Combobox

Combobox without Accessible Name

This combobox has no accessible name - no label, aria-label, or aria-labelledby.

<div class="combobox-wrapper"> <input type="text" id="combobox-no-label-fail" class="a11yTestFail" role="combobox" aria-controls="listbox-2" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-2" role="listbox" style="display: none;"> <div role="option" id="option-3">Option A</div> <div role="option" id="option-4">Option B</div> </div> </div>

Combobox with Empty aria-label

This combobox has an aria-label attribute, but it's empty, providing no accessible name.

Combobox with Broken aria-labelledby

This combobox references a non-existent element with aria-labelledby.

<div class="combobox-wrapper"> <input type="text" id="combobox-broken-labelledby-fail" class="a11yTestFail" role="combobox" aria-labelledby="non-existent-id" aria-controls="listbox-4" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-4" role="listbox" style="display: none;"> <div role="option" id="option-7">Result 1</div> <div role="option" id="option-8">Result 2</div> </div> </div>

Combobox with Whitespace-only aria-label

This combobox has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

<div class="combobox-wrapper"> <input type="text" id="combobox-whitespace-aria-label-fail" class="a11yTestFail" role="combobox" aria-label=" " aria-controls="listbox-5" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-5" role="listbox" style="display: none;"> <div role="option" id="option-9">Option X</div> <div role="option" id="option-10">Option Y</div> </div> </div>

Combobox with Punctuation-only aria-label

This combobox has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

<div class="combobox-wrapper"> <input type="text" id="combobox-punctuation-aria-label-fail" class="a11yTestFail" role="combobox" aria-label="..." aria-controls="listbox-6" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-6" role="listbox" style="display: none;"> <div role="option" id="option-11">Choice A</div> <div role="option" id="option-12">Choice B</div> </div> </div>

Combobox with Empty Reference via aria-labelledby

This combobox references an element that exists but has empty content, resulting in an empty accessible name.

<span id="empty-label-reference"></span> <div class="combobox-wrapper"> <input type="text" id="combobox-empty-reference-fail" class="a11yTestFail" role="combobox" aria-labelledby="empty-label-reference" aria-controls="listbox-7" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-7" role="listbox" style="display: none;"> <div role="option" id="option-13">Selection 1</div> <div role="option" id="option-14">Selection 2</div> </div> </div>

Combobox with Whitespace-only Reference via aria-labelledby

This combobox references an element that contains only whitespace, resulting in a meaningless accessible name.

<span id="whitespace-label-reference"> </span> <div class="combobox-wrapper"> <input type="text" id="combobox-whitespace-reference-fail" class="a11yTestFail" role="combobox" aria-labelledby="whitespace-label-reference" aria-controls="listbox-8" aria-expanded="false" aria-autocomplete="list"> <div id="listbox-8" role="listbox" style="display: none;"> <div role="option" id="option-15">Value 1</div> <div role="option" id="option-16">Value 2</div> </div> </div>

2. Slider (role="slider")

These tests validate accessible names for elements with role="slider".

Passing Examples - Slider

Slider with aria-label

This div with role="slider" has an aria-label attribute that serves as its accessible name.

Failing Examples - Slider

Slider without Accessible Name

This div with role="slider" has no accessible name - no aria-label or aria-labelledby.

Slider with Empty aria-label

This div with role="slider" has an aria-label attribute, but it's empty, providing no accessible name.

Slider with Broken aria-labelledby

This div with role="slider" references a non-existent element with aria-labelledby.

Slider with Whitespace-only aria-label

This div with role="slider" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

Slider with Punctuation-only aria-label

This div with role="slider" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

Slider with Empty Reference via aria-labelledby

This div with role="slider" references an element that exists but has empty content, resulting in an empty accessible name.

Slider with Whitespace-only Reference via aria-labelledby

This div with role="slider" references an element that contains only whitespace, resulting in a meaningless accessible name.

3. Spinbutton (role="spinbutton")

These tests validate accessible names for elements with role="spinbutton".

Passing Examples - Spinbutton

Spinbutton with aria-label in Date Picker

This date picker uses spinbuttons with proper aria-label attributes that serve as their accessible names.

Month:

▲

These tests validate accessible names for elements with role="switch".

Passing Examples - Switch

Switch with Associated Label

This button with role="switch" has its accessible name provided by an associated label element.

Night Mode

<div class="toggleSwitch"> <span id="night-mode-label">Night Mode</span> <button role="switch" id="switch-with-label-pass" class="a11yTestPass" aria-checked="false" aria-labelledby="night-mode-label" tabindex="0"></button> </div>

Failing Examples - Switch

Switch without Accessible Name

This button with role="switch" has no accessible name - no aria-label or aria-labelledby.

Switch with Empty aria-label

This button with role="switch" has an aria-label attribute, but it's empty, providing no accessible name.

Switch with Broken aria-labelledby

This button with role="switch" references a non-existent element with aria-labelledby.

Switch with Whitespace-only aria-label

This button with role="switch" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

Switch with Punctuation-only aria-label

This button with role="switch" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

Switch with Empty Reference via aria-labelledby

This button with role="switch" references an element that exists but has empty content, resulting in an empty accessible name.

Switch with Whitespace-only Reference via aria-labelledby

This button with role="switch" references an element that contains only whitespace, resulting in a meaningless accessible name.

5. Dialog (role="dialog")

These tests validate accessible names for elements with role="dialog".

Passing Examples - Dialog

Dialog with aria-labelledby referencing heading

This div with role="dialog" uses aria-labelledby to reference its heading, providing an accessible name without duplication for screen readers.

<div role="dialog" id="dialog-labelledby-pass" class="a11yTestPass" aria-labelledby="privacy-settings-heading" aria-modal="true"> <h2 id="privacy-settings-heading">Privacy Settings</h2> <p>Please choose your privacy preferences.</p> <div role="button" tabindex="0" style="margin-top: 10px;">Save Preferences</div> </div>

Warning Examples - Dialog

Dialog with redundant aria-label

This div with role="dialog" has an aria-label attribute that duplicates the heading content, causing redundancy for screen reader users.

<div role="dialog" id="dialog-aria-label-warning" aria-label="Privacy Settings" aria-modal="true"> <h2>Privacy Settings</h2> <p>Please choose your privacy preferences.</p> <div role="button" tabindex="0" style="margin-top: 10px;">Save Preferences</div> </div>

Failing Examples - Dialog

Dialog without Accessible Name

This div with role="dialog" has no accessible name - no aria-label or aria-labelledby.

<div role="dialog" id="dialog-no-label-fail" class="a11yTestFail" aria-modal="true"> <h2>Confirmation</h2> <p>Are you sure you want to continue?</p> <div role="button" tabindex="0" style="margin-top: 10px;">Confirm</div> </div>

Dialog with Empty aria-label

This div with role="dialog" has an aria-label attribute, but it's empty, providing no accessible name.

<div role="dialog" id="dialog-empty-aria-label-fail" class="a11yTestFail" aria-label="" aria-modal="true"> <h2>Notification</h2> <p>Your document has been saved.</p> <div role="button" tabindex="0" style="margin-top: 10px;">Close</div> </div>

Dialog with Broken aria-labelledby

This div with role="dialog" references a non-existent element with aria-labelledby.

<div role="dialog" id="dialog-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-id" aria-modal="true"> <h2>Settings</h2> <p>Choose your application settings.</p> <div role="button" tabindex="0" style="margin-top: 10px;">Apply</div> </div>

6. Tabs (role="tablist", role="tab", role="tabpanel")

These tests validate accessible names for elements with tab-related ARIA roles.

Passing Examples - Tabs

Tabs with aria-label and Multiple Visual Indicators

This div with role="tablist" has an aria-label attribute that serves as its accessible name. The selected tab has multiple visual indicators (bold text, blue border, different background) to meet WCAG 1.4.1 Use of Color requirements.

Description

Specifications

Reviews

Product description content goes here.

<div role="tablist" id="tablist-aria-label-pass" class="a11yTestPass" aria-label="Product Information"> <div role="tab" id="tab1" aria-selected="true" tabindex="0">Description</div> <div role="tab" id="tab2" aria-selected="false" tabindex="-1">Specifications</div> <div role="tab" id="tab3" aria-selected="false" tabindex="-1">Reviews</div> </div> <div role="tabpanel" id="panel1" aria-labelledby="tab1"> <p>Product description content goes here.</p> </div>

Failing Examples - Tabs

Tablist without Accessible Name

This div with role="tablist" has no accessible name - no aria-label or aria-labelledby.

Features

Documentation

Features content goes here.

<div role="tablist" id="tablist-no-label-fail"> <div role="tab" id="tab4" aria-selected="true" tabindex="0">Features</div> <div role="tab" id="tab5" aria-selected="false" tabindex="-1">Documentation</div> </div> <div role="tabpanel" id="panel4" aria-labelledby="tab4"> <p>Features content goes here.</p> </div>

Tablist with Empty aria-label

This div with role="tablist" has an aria-label attribute, but it's empty, providing no accessible name.

Settings

Account

Settings content goes here.

<div role="tablist" id="tablist-empty-aria-label-fail" class="a11yTestFail" aria-label=""> <div role="tab" id="tab6" aria-selected="true" tabindex="0">Settings</div> <div role="tab" id="tab7" aria-selected="false" tabindex="-1">Account</div> </div> <div role="tabpanel" id="panel6" aria-labelledby="tab6"> <p>Settings content goes here.</p> </div>

Tablist with Whitespace-only aria-label

This div with role="tablist" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

Profile

History

Profile content goes here.

<div role="tablist" id="tablist-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" "> <div role="tab" id="tab-ws1" aria-selected="true" tabindex="0">Profile</div> <div role="tab" id="tab-ws2" aria-selected="false" tabindex="-1">History</div> </div> <div role="tabpanel" id="panel-ws1" aria-labelledby="tab-ws1"> <p>Profile content goes here.</p> </div>

Tablist with Punctuation-only aria-label

This div with role="tablist" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

Dashboard

Analytics

Dashboard content goes here.

<div role="tablist" id="tablist-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..."> <div role="tab" id="tab-punc1" aria-selected="true" tabindex="0">Dashboard</div> <div role="tab" id="tab-punc2" aria-selected="false" tabindex="-1">Analytics</div> </div> <div role="tabpanel" id="panel-punc1" aria-labelledby="tab-punc1"> <p>Dashboard content goes here.</p> </div>

Tab with Text Content as Accessible Name

This div with role="tab" uses its text content as its accessible name.

Documents

Media

Documents content goes here.

<div role="tablist" aria-label="Content Types"> <div role="tab" id="tab-text-content-pass" class="a11yTestPass" aria-selected="true" tabindex="0">Documents</div> <div role="tab" id="tab-other" aria-selected="false" tabindex="-1">Media</div> </div> <div role="tabpanel" id="panel-documents" aria-labelledby="tab-text-content-pass"> <p>Documents content goes here.</p> </div>

Tab without Accessible Name

This div with role="tab" has no accessible name - no text content, aria-label, or aria-labelledby.

Home

Home content goes here.

<div role="tablist" aria-label="Content Sections"> <div role="tab" id="tab8" aria-selected="true" tabindex="0">Home</div> <div role="tab" id="tab-no-label-fail" class="a11yTestFail" aria-selected="false" tabindex="-1"><span aria-hidden="true">📄</span></div> </div> <div role="tabpanel" id="panel8" aria-labelledby="tab8"> <p>Home content goes here.</p> </div>

Tab with Empty aria-label

This div with role="tab" has an aria-label attribute, but it's empty, providing no accessible name.

Settings

Home panel content.

<div role="tablist" aria-label="Navigation"> <div role="tab" id="tab-empty-label-fail" class="a11yTestFail" aria-label="" aria-selected="true" tabindex="0"><span aria-hidden="true">🏠</span></div> <div role="tab" id="tab-other2" aria-selected="false" tabindex="-1">Settings</div> </div> <div role="tabpanel" id="panel-home" aria-labelledby="tab-empty-label-fail"> <p>Home panel content.</p> </div>

Tab with Whitespace-only aria-label

This div with role="tab" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

Help

Settings panel content.

<div role="tablist" aria-label="Options"> <div role="tab" id="tab-whitespace-label-fail" class="a11yTestFail" aria-label=" " aria-selected="true" tabindex="0"><span aria-hidden="true">⚙️</span></div> <div role="tab" id="tab-other3" aria-selected="false" tabindex="-1">Help</div> </div> <div role="tabpanel" id="panel-settings" aria-labelledby="tab-whitespace-label-fail"> <p>Settings panel content.</p> </div>

Tabpanel with aria-labelledby Referencing Tab

This div with role="tabpanel" properly uses aria-labelledby to reference its associated tab for its accessible name.

Products

Services

This panel contains information about our products.

<div role="tablist" aria-label="Categories"> <div role="tab" id="tab-products" aria-selected="true" tabindex="0">Products</div> <div role="tab" id="tab-services" aria-selected="false" tabindex="-1">Services</div> </div> <div role="tabpanel" id="panel-products-pass" class="a11yTestPass" aria-labelledby="tab-products"> <p>This panel contains information about our products.</p> </div>

Tabpanel without Accessible Name

This div with role="tabpanel" has no accessible name - no aria-label or aria-labelledby.

Project 1

Project 1 details go here.

<div role="tablist" aria-label="Projects"> <div role="tab" id="tab9" aria-selected="true" tabindex="0">Project 1</div> </div> <div role="tabpanel" id="tabpanel-no-label-fail"> <p>Project 1 details go here.</p> </div>

Tabpanel with Broken aria-labelledby

This div with role="tabpanel" references a non-existent element with aria-labelledby.

Feature 1

Feature 1 description goes here.

<div role="tablist" aria-label="Features"> <div role="tab" id="tab-feature1" aria-selected="true" tabindex="0">Feature 1</div> </div> <div role="tabpanel" id="tabpanel-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-tab"> <p>Feature 1 description goes here.</p> </div>

Tabpanel Referencing Element Without Text

This div with role="tabpanel" references an element that exists but has no text content or accessible name.

Search results go here.

<div role="tablist" aria-label="Categories"> <div role="tab" id="empty-tab-reference" aria-selected="true" tabindex="0"><span aria-hidden="true">🔍</span></div> </div> <div role="tabpanel" id="tabpanel-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-tab-reference"> <p>Search results go here.</p> </div>

7. Menu and Menuitem (role="menu", role="menuitem")

These tests validate accessible names for elements with menu-related ARIA roles.

Warning Examples - Menu

Menu with aria-label (Use with Caution)

This div with role="menu" has an aria-label attribute that serves as its accessible name. However, role="menu" and role="menuitem" should only be used for application-like interfaces that mimic desktop software menus, not for website navigation. For website navigation, use the semantic <nav> element with links instead.

Appropriate Usage:

✅ Application menus that mimic desktop software (like text editors, graphic design tools)
✅ Context menus that appear on right-click
✅ Command menus where users select actions rather than navigate
❌ Website navigation - use <nav> with links instead
❌ Drop-down navigation menus - use <nav> with links instead

Note: When using role="menu", you must implement all expected keyboard interactions, including arrow key navigation and keyboard focus management.

Failing Examples - Menu

Menu without Accessible Name

This div with role="menu" has no accessible name - no aria-label or aria-labelledby.

<div role="menu" id="menu-no-label-fail"> <div role="menuitem" id="menuitem4" tabindex="-1">Cut</div> <div role="menuitem" id="menuitem5" tabindex="-1">Copy</div> <div role="menuitem" id="menuitem6" tabindex="-1">Paste</div> </div>

Menu with Empty aria-label

This div with role="menu" has an aria-label attribute, but it's empty, providing no accessible name.

<div role="menu" id="menu-empty-aria-label-fail" class="a11yTestFail" aria-label=""> <div role="menuitem" id="menuitem7" tabindex="-1">Reply</div> <div role="menuitem" id="menuitem8" tabindex="-1">Reply All</div> <div role="menuitem" id="menuitem9" tabindex="-1">Forward</div> </div>

Menu with Whitespace-only aria-label

This div with role="menu" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

<div role="menu" id="menu-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" "> <div role="menuitem" id="menuitem-ws1" tabindex="-1">Add</div> <div role="menuitem" id="menuitem-ws2" tabindex="-1">Edit</div> <div role="menuitem" id="menuitem-ws3" tabindex="-1">Delete</div> </div>

Menu with Punctuation-only aria-label

This div with role="menu" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

<div role="menu" id="menu-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..."> <div role="menuitem" id="menuitem-p1" tabindex="-1">Import</div> <div role="menuitem" id="menuitem-p2" tabindex="-1">Export</div> <div role="menuitem" id="menuitem-p3" tabindex="-1">Print</div> </div>

Menuitem with Text Content as Accessible Name (Use with Caution)

This div with role="menuitem" uses its text content as its accessible name. Remember that role="menuitem" should only be used within role="menu" for application-like interfaces, not for website navigation.

<div role="menu" aria-label="Document Actions"> <div role="menuitem" id="menuitem-text-warning" tabindex="-1">Download</div> <div role="menuitem" id="menuitem-alt" tabindex="-1">Share</div> </div>

Menuitem without Accessible Name

This div with role="menuitem" has no accessible name - no text content, aria-label, or aria-labelledby.

<div role="menu" aria-label="Actions"> <div role="menuitem" id="menuitem10" tabindex="-1">Share</div> <div role="menuitem" id="menuitem-no-label-fail" class="a11yTestFail" tabindex="-1"><span aria-hidden="true">🗑️</span></div> </div>

Menuitem with Empty aria-label

This div with role="menuitem" has an aria-label attribute, but it's empty, providing no accessible name.

Menuitem with Whitespace-only aria-label

This div with role="menuitem" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

Menuitem with Punctuation-only aria-label

This div with role="menuitem" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

Menu with aria-labelledby

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

<h4 id="menu-label-reference">Format Options</h4> <div role="menu" id="menu-with-labelledby" aria-labelledby="menu-label-reference"> <div role="menuitem" id="menuitem-format1" tabindex="-1">Bold</div> <div role="menuitem" id="menuitem-format2" tabindex="-1">Italic</div> <div role="menuitem" id="menuitem-format3" tabindex="-1">Underline</div> </div>

Menu with Broken aria-labelledby

This div with role="menu" references a non-existent element with aria-labelledby.

<div role="menu" id="menu-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-menu-label"> <div role="menuitem" id="menuitem-broken1" tabindex="-1">Page Setup</div> <div role="menuitem" id="menuitem-broken2" tabindex="-1">Print Preview</div> <div role="menuitem" id="menuitem-broken3" tabindex="-1">Print</div> </div>

Menu with Empty Reference via aria-labelledby

This menu references an element that exists but has empty content, resulting in an empty accessible name.

<span id="empty-menu-label-reference"></span> <div role="menu" id="menu-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-menu-label-reference"> <div role="menuitem" id="menuitem-empty-ref1" tabindex="-1">Find</div> <div role="menuitem" id="menuitem-empty-ref2" tabindex="-1">Replace</div> <div role="menuitem" id="menuitem-empty-ref3" tabindex="-1">Select All</div> </div>

Menu with Whitespace-only Reference via aria-labelledby

This menu references an element that contains only whitespace, resulting in a meaningless accessible name.

<span id="whitespace-menu-label-reference"> </span> <div role="menu" id="menu-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-menu-label-reference"> <div role="menuitem" id="menuitem-ws-ref1" tabindex="-1">Cut</div> <div role="menuitem" id="menuitem-ws-ref2" tabindex="-1">Copy</div> <div role="menuitem" id="menuitem-ws-ref3" tabindex="-1">Paste</div> </div>

Menuitem with aria-labelledby

This menuitem uses aria-labelledby to reference another element for its accessible name.

<div role="menu" aria-label="Account Actions"> <div role="menuitem" id="menuitem-acc1" tabindex="-1">Log In</div> <span id="logout-action-label">Log Out of Account</span> <div role="menuitem" id="menuitem-with-labelledby" aria-labelledby="logout-action-label" tabindex="-1"><span aria-hidden="true">🚪</span></div> </div>

Menuitem with Broken aria-labelledby

This menuitem references a non-existent element with aria-labelledby.

<div role="menu" aria-label="System Functions"> <div role="menuitem" id="menuitem-sys1" tabindex="-1">Sleep</div> <div role="menuitem" id="menuitem-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-menuitem-label" tabindex="-1"><span aria-hidden="true">⚙️</span></div> </div>

Menuitem with Empty Reference via aria-labelledby

This menuitem references an element that exists but has empty content, resulting in an empty accessible name.

Menuitem with Whitespace-only Reference via aria-labelledby

This menuitem references an element that contains only whitespace, resulting in a meaningless accessible name.

<div role="menu" aria-label="Tools"> <div role="menuitem" id="menuitem-tool1" tabindex="-1">Check Spelling</div> <span id="whitespace-menuitem-label-reference"> </span> <div role="menuitem" id="menuitem-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-menuitem-label-reference" tabindex="-1"><span aria-hidden="true">🔧</span></div> </div>

8. Listbox and Option (role="listbox", role="option")

These tests validate accessible names for elements with listbox-related ARIA roles.

Passing Examples - Listbox

Listbox with aria-label

This div with role="listbox" has an aria-label attribute that serves as its accessible name.

<div role="listbox" id="listbox-aria-label-pass" class="a11yTestPass" aria-label="Available Colors" tabindex="0"> <div role="option" id="option1" tabindex="-1">Red</div> <div role="option" id="option2" tabindex="-1">Green</div> <div role="option" id="option3" tabindex="-1">Blue</div> </div>

Failing Examples - Listbox

Listbox without Accessible Name

This div with role="listbox" has no accessible name - no aria-label or aria-labelledby.

<div role="listbox" id="listbox-no-label-fail" class="a11yTestFail" tabindex="0"> <div role="option" id="option4" tabindex="-1">Small</div> <div role="option" id="option5" tabindex="-1">Medium</div> <div role="option" id="option6" tabindex="-1">Large</div> </div>

Listbox with Empty aria-label

This div with role="listbox" has an aria-label attribute, but it's empty, providing no accessible name.

<div role="listbox" id="listbox-empty-aria-label-fail" class="a11yTestFail" aria-label="" tabindex="0"> <div role="option" id="option7" tabindex="-1">English</div> <div role="option" id="option8" tabindex="-1">Spanish</div> <div role="option" id="option9" tabindex="-1">French</div> </div>

Listbox with Whitespace-only aria-label

This div with role="listbox" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

<div role="listbox" id="listbox-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " tabindex="0"> <div role="option" id="option-ws-label1" tabindex="-1">Red</div> <div role="option" id="option-ws-label2" tabindex="-1">Green</div> <div role="option" id="option-ws-label3" tabindex="-1">Blue</div> </div>

Listbox with Punctuation-only aria-label

This div with role="listbox" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

<div role="listbox" id="listbox-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." tabindex="0"> <div role="option" id="option-punc-label1" tabindex="-1">Desktop</div> <div role="option" id="option-punc-label2" tabindex="-1">Tablet</div> <div role="option" id="option-punc-label3" tabindex="-1">Mobile</div> </div>

Option without Accessible Name

This div with role="option" has no accessible name - no text content, aria-label, or aria-labelledby.

<div role="listbox" aria-label="Categories"> <div role="option" id="option10" tabindex="-1">Books</div> <div role="option" id="option-no-label-fail" class="a11yTestFail" tabindex="-1"><span aria-hidden="true">📱</span></div> </div>

Option with Whitespace-only aria-label

This option has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

<div role="listbox" aria-label="File Types"> <div role="option" id="option-filetype1" tabindex="-1">Document</div> <div role="option" id="option-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " tabindex="-1"><span aria-hidden="true">🖼️</span></div> </div>

Option with Punctuation-only aria-label

This option has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

<div role="listbox" aria-label="Status Options"> <div role="option" id="option-status1" tabindex="-1">Available</div> <div role="option" id="option-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." tabindex="-1"><span aria-hidden="true">🔴</span></div> </div>

Listbox with aria-labelledby

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

Select a Country

<h4 id="listbox-label-reference">Select a Country</h4> <div role="listbox" id="listbox-with-labelledby" aria-labelledby="listbox-label-reference" tabindex="0"> <div role="option" id="option-country1" tabindex="-1">United States</div> <div role="option" id="option-country2" tabindex="-1">Canada</div> <div role="option" id="option-country3" tabindex="-1">Mexico</div> </div>

Listbox with Broken aria-labelledby

This div with role="listbox" references a non-existent element with aria-labelledby.

<div role="listbox" id="listbox-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-listbox-label" tabindex="0"> <div role="option" id="option-broken1" tabindex="-1">Apple</div> <div role="option" id="option-broken2" tabindex="-1">Orange</div> <div role="option" id="option-broken3" tabindex="-1">Banana</div> </div>

Listbox with Empty Reference via aria-labelledby

This listbox references an element that exists but has empty content, resulting in an empty accessible name.

<span id="empty-listbox-label-reference"></span> <div role="listbox" id="listbox-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-listbox-label-reference" tabindex="0"> <div role="option" id="option-empty-ref1" tabindex="-1">Monday</div> <div role="option" id="option-empty-ref2" tabindex="-1">Tuesday</div> <div role="option" id="option-empty-ref3" tabindex="-1">Wednesday</div> </div>

Listbox with Whitespace-only Reference via aria-labelledby

This listbox references an element that contains only whitespace, resulting in a meaningless accessible name.

<span id="whitespace-listbox-label-reference"> </span> <div role="listbox" id="listbox-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-listbox-label-reference" tabindex="0"> <div role="option" id="option-ws-ref1" tabindex="-1">January</div> <div role="option" id="option-ws-ref2" tabindex="-1">February</div> <div role="option" id="option-ws-ref3" tabindex="-1">March</div> </div>

Listbox with Punctuation-only Reference via aria-labelledby

This listbox references an element that contains only punctuation, resulting in a meaningless accessible name.

...

<span id="punctuation-listbox-label-reference">...</span> <div role="listbox" id="listbox-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-listbox-label-reference" tabindex="0"> <div role="option" id="option-punc-ref1" tabindex="-1">Online</div> <div role="option" id="option-punc-ref2" tabindex="-1">In-Store</div> <div role="option" id="option-punc-ref3" tabindex="-1">Phone</div> </div>

Option with aria-labelledby

This option uses aria-labelledby to reference another element for its accessible name.

<div role="listbox" aria-label="Payment Methods"> <div role="option" id="option-payment1" tabindex="-1">Credit Card</div> <span id="bank-transfer-label">Bank Transfer Payment</span> <div role="option" id="option-with-labelledby" aria-labelledby="bank-transfer-label" tabindex="-1"><span aria-hidden="true">🏦</span></div> </div>

Option with Broken aria-labelledby

This option references a non-existent element with aria-labelledby.

<div role="listbox" aria-label="Delivery Options"> <div role="option" id="option-delivery1" tabindex="-1">Standard Shipping</div> <div role="option" id="option-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-option-label" tabindex="-1"><span aria-hidden="true">🚚</span></div> </div>

Option with Empty Reference via aria-labelledby

This option references an element that exists but has empty content, resulting in an empty accessible name.

<div role="listbox" aria-label="Account Types"> <div role="option" id="option-account1" tabindex="-1">Personal</div> <span id="empty-option-label-reference"></span> <div role="option" id="option-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-option-label-reference" tabindex="-1"><span aria-hidden="true">👥</span></div> </div>

Option with Whitespace-only Reference via aria-labelledby

This option references an element that contains only whitespace, resulting in a meaningless accessible name.

<div role="listbox" aria-label="Notification Preferences"> <div role="option" id="option-notification1" tabindex="-1">Email</div> <span id="whitespace-option-label-reference"> </span> <div role="option" id="option-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-option-label-reference" tabindex="-1"><span aria-hidden="true">📱</span></div> </div>

Option with Punctuation-only Reference via aria-labelledby

This option references an element that contains only punctuation, resulting in a meaningless accessible name.

9. Tree and Treeitem (role="tree", role="treeitem")

These tests validate accessible names for elements with tree-related ARIA roles.

Passing Examples - Tree

Tree with aria-label

This div with role="tree" has an aria-label attribute that serves as its accessible name.

📁 Documents

📄 Report.pdf

📄 Notes.txt

📁 Pictures

📄 Resume.docx

<div role="tree" id="tree-aria-label-pass" class="a11yTestPass" aria-label="File Explorer" tabindex="0"> <div role="treeitem" id="treeitem1" aria-expanded="true" tabindex="0" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Documents</span> <div role="group"> <div role="treeitem" id="treeitem2" tabindex="-1" aria-level="2"> <span class="tree-icon">📄</span> <span class="tree-label">Report.pdf</span> </div> <div role="treeitem" id="treeitem3" tabindex="-1" aria-level="2"> <span class="tree-icon">📄</span> <span class="tree-label">Notes.txt</span> </div> </div> </div> <div role="treeitem" id="treeitem4" aria-expanded="false" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Pictures</span> <div role="group" hidden> <div role="treeitem" id="treeitem5" tabindex="-1" aria-level="2"> <span class="tree-icon">🖼️</span> <span class="tree-label">Vacation.jpg</span> </div> <div role="treeitem" id="treeitem6" tabindex="-1" aria-level="2"> <span class="tree-icon">🖼️</span> <span class="tree-label">Family.png</span> </div> </div> </div> <div role="treeitem" id="treeitem7" tabindex="-1" aria-level="1"> <span class="tree-icon">📄</span> <span class="tree-label">Resume.docx</span> </div> </div>

Key ARIA attributes explained:

role="tree" - Identifies the widget as a tree view
role="treeitem" - Identifies elements as items within the tree
role="group" - Contains related treeitems that are children of a parent treeitem
aria-expanded="true/false" - Indicates whether a treeitem that has children is expanded or collapsed
aria-level="1/2" - Indicates the hierarchical level of each treeitem
tabindex="0" - Indicates the currently focused item (only one treeitem has tabindex="0" at a time)
tabindex="-1" - Allows items to receive focus programmatically but not in the tab order

Passing Examples - Tree with aria-labelledby

Tree with aria-labelledby

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

Project Files

📁 Source

📄 index.js

📄 styles.css

📄 README.md

<h4 id="tree-label-reference">Project Files</h4> <div role="tree" id="tree-with-labelledby" aria-labelledby="tree-label-reference" tabindex="0"> <div role="treeitem" id="treeitem-labelledby1" aria-expanded="true" tabindex="0" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Source</span> <div role="group"> <div role="treeitem" id="treeitem-labelledby2" tabindex="-1" aria-level="2"> <span class="tree-icon">📄</span> <span class="tree-label">index.js</span> </div> <div role="treeitem" id="treeitem-labelledby3" tabindex="-1" aria-level="2"> <span class="tree-icon">📄</span> <span class="tree-label">styles.css</span> </div> </div> </div> <div role="treeitem" id="treeitem-labelledby4" tabindex="-1" aria-level="1"> <span class="tree-icon">📄</span> <span class="tree-label">README.md</span> </div> </div>

Failing Examples - Tree

Tree without Accessible Name

This div with role="tree" has no accessible name - no aria-label or aria-labelledby.

📁 Projects

📁 Assets

<div role="tree" id="tree-no-label-fail" class="a11yTestFail" tabindex="0"> <div role="treeitem" id="treeitem-noname1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Projects</span> </div> <div role="treeitem" id="treeitem-noname2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Assets</span> </div> </div>

Tree with Empty aria-label

This div with role="tree" has an aria-label attribute, but it's empty, providing no accessible name.

📁 Products

📁 Services

<div role="tree" id="tree-empty-aria-label-fail" class="a11yTestFail" aria-label="" tabindex="0"> <div role="treeitem" id="treeitem-empty1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Products</span> </div> <div role="treeitem" id="treeitem-empty2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Services</span> </div> </div>

Tree with Whitespace-only aria-label

This div with role="tree" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

📁 Templates

📁 Backups

<div role="tree" id="tree-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " tabindex="0"> <div role="treeitem" id="treeitem-ws1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Templates</span> </div> <div role="treeitem" id="treeitem-ws2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Backups</span> </div> </div>

Tree with Punctuation-only aria-label

This div with role="tree" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

📁 Downloads

📁 Music

<div role="tree" id="tree-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." tabindex="0"> <div role="treeitem" id="treeitem-punc1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Downloads</span> </div> <div role="treeitem" id="treeitem-punc2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Music</span> </div> </div>

Tree with Broken aria-labelledby

This div with role="tree" references a non-existent element with aria-labelledby.

📁 Config

📁 Data

<div role="tree" id="tree-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-tree-label" tabindex="0"> <div role="treeitem" id="treeitem-broken1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Config</span> </div> <div role="treeitem" id="treeitem-broken2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Data</span> </div> </div>

Tree with Empty Reference via aria-labelledby

This tree references an element that exists but has empty content, resulting in an empty accessible name.

📁 Logs

📁 Temp

Tree with Whitespace-only Reference via aria-labelledby

This tree references an element that contains only whitespace, resulting in a meaningless accessible name.

📁 Cache

📁 Settings

<span id="whitespace-tree-label-reference"> </span> <div role="tree" id="tree-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-tree-label-reference" tabindex="0"> <div role="treeitem" id="treeitem-ws-ref1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Cache</span> </div> <div role="treeitem" id="treeitem-ws-ref2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Settings</span> </div> </div>

Tree with Punctuation-only Reference via aria-labelledby

This tree references an element that contains only punctuation, resulting in a meaningless accessible name.

...

📁 Public

📁 Private

<span id="punctuation-tree-label-reference">...</span> <div role="tree" id="tree-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-tree-label-reference" tabindex="0"> <div role="treeitem" id="treeitem-punc-ref1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Public</span> </div> <div role="treeitem" id="treeitem-punc-ref2" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Private</span> </div> </div>

Treeitem without Accessible Name

This div with role="treeitem" has no accessible name - no text content, aria-label, or aria-labelledby.

📁 Applications

<div role="tree" aria-label="Directories"> <div role="treeitem" id="treeitem-dir1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Applications</span> </div> <div role="treeitem" id="treeitem-no-label-fail" class="a11yTestFail" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with aria-label but Empty

This div with role="treeitem" has an aria-label attribute, but it's empty, providing no accessible name.

📁 Desktop

<div role="tree" aria-label="User Files"> <div role="treeitem" id="treeitem-user1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Desktop</span> </div> <div role="treeitem" id="treeitem-empty-label-fail" class="a11yTestFail" aria-label="" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with Whitespace-only aria-label

This div with role="treeitem" has an aria-label attribute containing only whitespace, which doesn't provide a meaningful accessible name.

📁 System32

<div role="tree" aria-label="System Files"> <div role="treeitem" id="treeitem-sys1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">System32</span> </div> <div role="treeitem" id="treeitem-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with Punctuation-only aria-label

This div with role="treeitem" has an aria-label attribute containing only punctuation, which doesn't provide a meaningful accessible name.

📁 Microsoft

<div role="tree" aria-label="Program Files"> <div role="treeitem" id="treeitem-prog1" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Microsoft</span> </div> <div role="treeitem" id="treeitem-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with aria-labelledby

This treeitem uses aria-labelledby to reference another element for its accessible name.

Home Directory

📁

📁 Network Share

<div role="tree" aria-label="Network Drives"> <span id="home-drive-label">Home Directory</span> <div role="treeitem" id="treeitem-with-labelledby" aria-labelledby="home-drive-label" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> </div> <div role="treeitem" id="treeitem-network" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Network Share</span> </div> </div>

Treeitem with Broken aria-labelledby

This treeitem references a non-existent element with aria-labelledby.

📁 Cloud Documents

<div role="tree" aria-label="Cloud Storage"> <div role="treeitem" id="treeitem-cloud" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Cloud Documents</span> </div> <div role="treeitem" id="treeitem-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-treeitem-label" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with Empty Reference via aria-labelledby

This treeitem references an element that exists but has empty content, resulting in an empty accessible name.

📁 Backup Archive

<div role="tree" aria-label="Backup Files"> <span id="empty-treeitem-label-reference"></span> <div role="treeitem" id="treeitem-backup" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Backup Archive</span> </div> <div role="treeitem" id="treeitem-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-treeitem-label-reference" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with Whitespace-only Reference via aria-labelledby

This treeitem references an element that contains only whitespace, resulting in a meaningless accessible name.

📁 Media Library

<div role="tree" aria-label="Media Files"> <span id="whitespace-treeitem-label-reference"> </span> <div role="treeitem" id="treeitem-media" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">Media Library</span> </div> <div role="treeitem" id="treeitem-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-treeitem-label-reference" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

Treeitem with Punctuation-only Reference via aria-labelledby

This treeitem references an element that contains only punctuation, resulting in a meaningless accessible name.

...

📁 External Drive

<div role="tree" aria-label="External Storage"> <span id="punctuation-treeitem-label-reference">...</span> <div role="treeitem" id="treeitem-external" tabindex="-1" aria-level="1"> <span class="tree-icon">📁</span> <span class="tree-label">External Drive</span> </div> <div role="treeitem" id="treeitem-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-treeitem-label-reference" tabindex="-1" aria-level="1"> <span class="tree-icon" aria-hidden="true">📁</span> </div> </div>

ARIA Roles Accessible Names Test - Part 1