Web Accessibility Guidelines Updated
The W3C has released new updates to the Web Content Accessibility Guidelines.
Test cases: 24 passing, 64 failing (88 total)
This page continues the test cases for accessible names in ARIA role elements according to the WCAG accessible name computation algorithm.
These tests validate accessible names for elements with role="toolbar".
The <nav> element and role="toolbar" serve different purposes in web accessibility:
<nav> When:Example:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
role="toolbar" When:Example:
<div role="toolbar" aria-label="Text formatting options"> <button aria-pressed="false">Bold</button> <button aria-pressed="false">Italic</button> <button aria-pressed="false">Underline</button> </div>
Important: The key difference is that <nav> is for moving between pages or sections, while role="toolbar" is for presenting action buttons that perform operations on content.
Common Mistake: Using role="toolbar" for site navigation instead of the semantic <nav> element. This can confuse assistive technology users and lead to navigation difficulties.
This div with role="toolbar" has an aria-label attribute that serves as its accessible name.
<div role="toolbar" id="toolbar-aria-label-pass" class="a11yTestPass" aria-label="Text Formatting"> <div role="button" tabindex="0">Bold</div> <div role="button" tabindex="-1">Italic</div> <div role="button" tabindex="-1">Underline</div> </div>
This div with role="toolbar" uses aria-labelledby to reference a heading as its accessible name.
<h4 id="document-toolbar-heading">Document Tools</h4> <div role="toolbar" id="toolbar-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="document-toolbar-heading"> <div role="button" tabindex="0">Save</div> <div role="button" tabindex="-1">Print</div> <div role="button" tabindex="-1">Share</div> </div>
This div with role="toolbar" has no accessible name - no aria-label or aria-labelledby.
<div role="toolbar" id="toolbar-no-label-fail"> <div role="button" tabindex="0">Cut</div> <div role="button" tabindex="-1">Copy</div> <div role="button" tabindex="-1">Paste</div> </div>
This div with role="toolbar" has an aria-label attribute, but it's empty, providing no accessible name.
<div role="toolbar" id="toolbar-empty-aria-label-fail" class="a11yTestFail" aria-label=""> <div role="button" tabindex="0">Zoom In</div> <div role="button" tabindex="-1">Zoom Out</div> <div role="button" tabindex="-1">Reset</div> </div>
This div with role="toolbar" has an aria-label attribute that contains only whitespace, which is effectively empty.
<div role="toolbar" id="toolbar-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" "> <div role="button" tabindex="0">Undo</div> <div role="button" tabindex="-1">Redo</div> <div role="button" tabindex="-1">Apply</div> </div>
This div with role="toolbar" has an aria-label with only punctuation, which is not a meaningful accessible name.
<div role="toolbar" id="toolbar-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..."> <div role="button" tabindex="0">Format</div> <div role="button" tabindex="-1">Align</div> <div role="button" tabindex="-1">Style</div> </div>
This div with role="toolbar" references a non-existent element ID with aria-labelledby.
<div role="toolbar" id="toolbar-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-toolbar-id"> <div role="button" tabindex="0">Insert</div> <div role="button" tabindex="-1">Delete</div> <div role="button" tabindex="-1">Replace</div> </div>
This div with role="toolbar" references an element that has no content via aria-labelledby.
<span id="empty-toolbar-label"></span> <div role="toolbar" id="toolbar-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-toolbar-label"> <div role="button" tabindex="0">Crop</div> <div role="button" tabindex="-1">Rotate</div> <div role="button" tabindex="-1">Flip</div> </div>
This div with role="toolbar" references an element that has only whitespace via aria-labelledby.
<span id="whitespace-toolbar-label"> </span> <div role="toolbar" id="toolbar-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-toolbar-label"> <div role="button" tabindex="0">Add</div> <div role="button" tabindex="-1">Edit</div> <div role="button" tabindex="-1">Remove</div> </div>
This div with role="toolbar" references an element that has only punctuation via aria-labelledby.
...<span id="punctuation-toolbar-label">...</span> <div role="toolbar" id="toolbar-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-toolbar-label"> <div role="button" tabindex="0">Import</div> <div role="button" tabindex="-1">Export</div> <div role="button" tabindex="-1">Download</div> </div>
These tests validate accessible names for elements with role="menubar".
This div with role="menubar" has an aria-label attribute that serves as its accessible name.
<div role="menubar" id="menubar-aria-label-pass" class="a11yTestPass" aria-label="Main Navigation"> <div role="menuitem" tabindex="0">Home</div> <div role="menuitem" tabindex="-1">Products</div> <div role="menuitem" tabindex="-1">Services</div> <div role="menuitem" tabindex="-1">About</div> </div>
This div with role="menubar" uses aria-labelledby to reference a heading as its accessible name.
<h4 id="site-menubar-heading">Site Navigation</h4> <div role="menubar" id="menubar-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="site-menubar-heading"> <div role="menuitem" tabindex="0">Dashboard</div> <div role="menuitem" tabindex="-1">Reports</div> <div role="menuitem" tabindex="-1">Settings</div> <div role="menuitem" tabindex="-1">Help</div> </div>
This div with role="menubar" has no accessible name - no aria-label or aria-labelledby.
<div role="menubar" id="menubar-no-label-fail"> <div role="menuitem" tabindex="0">File</div> <div role="menuitem" tabindex="-1">Edit</div> <div role="menuitem" tabindex="-1">View</div> <div role="menuitem" tabindex="-1">Tools</div> </div>
This div with role="menubar" has an aria-label attribute, but it's empty, providing no accessible name.
<div role="menubar" id="menubar-empty-aria-label-fail" class="a11yTestFail" aria-label=""> <div role="menuitem" tabindex="0">Accounts</div> <div role="menuitem" tabindex="-1">Billing</div> <div role="menuitem" tabindex="-1">Support</div> </div>
This div with role="menubar" has an aria-label attribute that contains only whitespace, which is effectively empty.
<div role="menubar" id="menubar-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" "> <div role="menuitem" tabindex="0">News</div> <div role="menuitem" tabindex="-1">Articles</div> <div role="menuitem" tabindex="-1">Videos</div> </div>
This div with role="menubar" has an aria-label with only punctuation, which is not a meaningful accessible name.
<div role="menubar" id="menubar-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..."> <div role="menuitem" tabindex="0">Projects</div> <div role="menuitem" tabindex="-1">Tasks</div> <div role="menuitem" tabindex="-1">Team</div> </div>
This div with role="menubar" references a non-existent element ID with aria-labelledby.
<div role="menubar" id="menubar-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-menubar-id"> <div role="menuitem" tabindex="0">Music</div> <div role="menuitem" tabindex="-1">Podcasts</div> <div role="menuitem" tabindex="-1">Audiobooks</div> </div>
This div with role="menubar" references an element that has no content via aria-labelledby.
<span id="empty-menubar-label"></span> <div role="menubar" id="menubar-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-menubar-label"> <div role="menuitem" tabindex="0">Categories</div> <div role="menuitem" tabindex="-1">Tags</div> <div role="menuitem" tabindex="-1">Authors</div> </div>
This div with role="menubar" references an element that has only whitespace via aria-labelledby.
<span id="whitespace-menubar-label"> </span> <div role="menubar" id="menubar-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-menubar-label"> <div role="menuitem" tabindex="0">Gallery</div> <div role="menuitem" tabindex="-1">Albums</div> <div role="menuitem" tabindex="-1">Collections</div> </div>
This div with role="menubar" references an element that has only punctuation via aria-labelledby.
<span id="punctuation-menubar-label">...</span> <div role="menubar" id="menubar-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-menubar-label"> <div role="menuitem" tabindex="0">Design</div> <div role="menuitem" tabindex="-1">Code</div> <div role="menuitem" tabindex="-1">Preview</div> </div>
These tests validate accessible names for elements with role="feed". The feed pattern is used for dynamically updated content like social media feeds or news streams.
The role="feed" is designed for scrollable content that dynamically loads and should:
role="article" elements as its childrenImportant: Feed elements require proper labeling so users understand what type of content is being presented.
This div with role="feed" has an aria-label attribute that serves as its accessible name.
The W3C has released new updates to the Web Content Accessibility Guidelines.
Major screen reader vendors unveiled new features to improve web navigation.
<div role="feed" id="feed-aria-label-pass" class="a11yTestPass" aria-label="Latest News Updates"> <div role="article"> <h3>Web Accessibility Guidelines Updated</h3> <p>The W3C has released new updates to the Web Content Accessibility Guidelines.</p> <time>May 2, 2025</time> </div> <div role="article"> <h3>New Screen Reader Features Announced</h3> <p>Major screen reader vendors unveiled new features to improve web navigation.</p> <time>May 1, 2025</time> </div> </div>
This div with role="feed" uses aria-labelledby to reference a heading as its accessible name.
Just published my new article on accessibility testing tools!
Looking for recommendations on keyboard-accessible UI components.
<h3 id="social-feed-heading">Social Media Updates</h3> <div role="feed" id="feed-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="social-feed-heading"> <div role="article"> <h4>Alex Chen</h4> <p>Just published my new article on accessibility testing tools!</p> <time>3 hours ago</time> </div> <div role="article"> <h4>Jamie Taylor</h4> <p>Looking for recommendations on keyboard-accessible UI components.</p> <time>5 hours ago</time> </div> </div>
This div with role="feed" has no accessible name - no aria-label or aria-labelledby.
Check out these events focused on digital accessibility.
Join our experts for a deep dive into ARIA implementation.
<div role="feed" id="feed-no-label-fail"> <div role="article"> <h3>Upcoming Accessibility Events</h3> <p>Check out these events focused on digital accessibility.</p> <time>May 3, 2025</time> </div> <div role="article"> <h3>Webinar: ARIA Best Practices</h3> <p>Join our experts for a deep dive into ARIA implementation.</p> <time>May 5, 2025</time> </div> </div>
This div with role="feed" has an aria-label attribute, but it's empty, providing no accessible name.
Several new tools for automated accessibility testing launched this week.
Learn how a major retailer improved their accessibility compliance.
<div role="feed" id="feed-empty-aria-label-fail" class="a11yTestFail" aria-label=""> <div role="article"> <h3>New Accessibility Tools Released</h3> <p>Several new tools for automated accessibility testing launched this week.</p> <time>2 days ago</time> </div> <div role="article"> <h3>Case Study: Website Remediation</h3> <p>Learn how a major retailer improved their accessibility compliance.</p> <time>3 days ago</time> </div> </div>
This div with role="feed" has an aria-label attribute that contains only whitespace, which is effectively empty.
New guidelines for creating effective VPAT reports have been published.
Best practices for ensuring your mobile applications are accessible.
<div role="feed" id="feed-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" "> <div role="article"> <h3>Accessibility Conformance Reports</h3> <p>New guidelines for creating effective VPAT reports have been published.</p> <time>Last week</time> </div> <div role="article"> <h3>Mobile Accessibility Tips</h3> <p>Best practices for ensuring your mobile applications are accessible.</p> <time>2 weeks ago</time> </div> </div>
This div with role="feed" has an aria-label with only punctuation, which is not a meaningful accessible name.
Join our virtual workshop on creating keyboard accessible interfaces.
Methods for testing your applications with popular screen readers.
<div role="feed" id="feed-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..."> <div role="article"> <h3>Keyboard Navigation Workshop</h3> <p>Join our virtual workshop on creating keyboard accessible interfaces.</p> <time>June 10, 2025</time> </div> <div role="article"> <h3>Screen Reader Compatibility Testing</h3> <p>Methods for testing your applications with popular screen readers.</p> <time>June 15, 2025</time> </div> </div>
This div with role="feed" references a non-existent element ID with aria-labelledby.
A new tool for verifying color contrast compliance has been released.
Guidelines for creating forms that are accessible to all users.
<div role="feed" id="feed-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-feed-id"> <div role="article"> <h3>Color Contrast Checker Tool</h3> <p>A new tool for verifying color contrast compliance has been released.</p> <time>April 28, 2025</time> </div> <div role="article"> <h3>Accessible Form Design</h3> <p>Guidelines for creating forms that are accessible to all users.</p> <time>April 25, 2025</time> </div> </div>
This div with role="feed" references an element that has no content via aria-labelledby.
Updated guidelines for creating accessible PDF documents.
How to create effective captions for video content.
<span id="empty-feed-label"></span> <div role="feed" id="feed-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-feed-label"> <div role="article"> <h3>PDF Accessibility Standards</h3> <p>Updated guidelines for creating accessible PDF documents.</p> <time>1 month ago</time> </div> <div role="article"> <h3>Video Captioning Best Practices</h3> <p>How to create effective captions for video content.</p> <time>1 month ago</time> </div> </div>
This div with role="feed" references an element that has only whitespace via aria-labelledby.
Understanding how to properly implement ARIA landmarks for better navigation.
Best practices for managing focus in interactive web applications.
<span id="whitespace-feed-label"> </span> <div role="feed" id="feed-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-feed-label"> <div role="article"> <h3>ARIA Landmarks Overview</h3> <p>Understanding how to properly implement ARIA landmarks for better navigation.</p> <time>2 months ago</time> </div> <div role="article"> <h3>Focus Management Techniques</h3> <p>Best practices for managing focus in interactive web applications.</p> <time>2 months ago</time> </div> </div>
This div with role="feed" references an element that has only punctuation via aria-labelledby.
...A detailed comparison of popular accessibility testing tools and their features.
How to incorporate inclusive design principles into your development process.
<span id="punctuation-feed-label">...</span> <div role="feed" id="feed-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-feed-label"> <div role="article"> <h3>Accessibility Testing Tools Comparison</h3> <p>A detailed comparison of popular accessibility testing tools and their features.</p> <time>Q1 2025</time> </div> <div role="article"> <h3>Inclusive Design Principles</h3> <p>How to incorporate inclusive design principles into your development process.</p> <time>Q2 2025</time> </div> </div>
These tests validate accessible names for elements with role="radio". Radio buttons allow users to select a single option from a set of choices.
According to the ARIA Authoring Practices Guide (APG), the role="radio" is used to create a selectable input in a radio group where only one option can be selected. Key implementation requirements include:
radiogroup element or an element with role="radiogroup"aria-checked="true" for the selected radio button and aria-checked="false" for unselected onesaria-label or aria-labelledbyImportant: When possible, use the native HTML <input type="radio"> elements instead of ARIA roles for better compatibility and accessibility.
This div with role="radio" has an aria-label attribute that serves as its accessible name.
<div role="radiogroup" aria-label="Subscription Options"> <div role="radio" id="radio-aria-label-pass" class="a11yTestPass" aria-label="Monthly Plan" aria-checked="false" tabindex="0"></div> <div>Monthly subscription ($9.99/month)</div> </div>
This div with role="radio" uses aria-labelledby to reference another element as its accessible name.
<div role="radiogroup" aria-label="Payment Methods"> <div id="credit-card-label">Credit Card</div> <div role="radio" id="radio-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="credit-card-label" aria-checked="true" tabindex="0"></div> <div>Pay with Visa, Mastercard, or American Express</div> </div>
This div with role="radio" has no accessible name - no aria-label or aria-labelledby.
<div role="radiogroup" aria-label="Delivery Options"> <div role="radio" id="radio-no-label-fail" class="a11yTestFail" aria-checked="false" tabindex="0"></div> <div>Standard Delivery (3-5 business days)</div> </div>
This div with role="radio" has an aria-label attribute, but it's empty, providing no accessible name.
<div role="radiogroup" aria-label="Notification Preferences"> <div role="radio" id="radio-empty-aria-label-fail" class="a11yTestFail" aria-label="" aria-checked="false" tabindex="0"></div> <div>Email notifications</div> </div>
This div with role="radio" has an aria-label attribute that contains only whitespace, which is effectively empty.
<div role="radiogroup" aria-label="Theme Preferences"> <div role="radio" id="radio-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " aria-checked="false" tabindex="0"></div> <div>Dark Mode</div> </div>
This div with role="radio" has an aria-label with only punctuation, which is not a meaningful accessible name.
<div role="radiogroup" aria-label="Account Type"> <div role="radio" id="radio-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." aria-checked="false" tabindex="0"></div> <div>Personal Account</div> </div>
This div with role="radio" references a non-existent element ID with aria-labelledby.
<div role="radiogroup" aria-label="Size Selection"> <div role="radio" id="radio-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-radio-id" aria-checked="false" tabindex="0"></div> <div>Medium Size</div> </div>
This div with role="radio" references an element that has no content via aria-labelledby.
<span id="empty-radio-label"></span> <div role="radiogroup" aria-label="Contact Preferences"> <div role="radio" id="radio-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-radio-label" aria-checked="false" tabindex="0"></div> <div>Phone Contact</div> </div>
This div with role="radio" references an element that has only whitespace via aria-labelledby.
<span id="whitespace-radio-label"> </span> <div role="radiogroup" aria-label="Privacy Settings"> <div role="radio" id="radio-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-radio-label" aria-checked="false" tabindex="0"></div> <div>Allow data sharing with partners</div> </div>
This div with role="radio" references an element that has only punctuation via aria-labelledby.
...<span id="punctuation-radio-label">...</span> <div role="radiogroup" aria-label="Shipping Options"> <div role="radio" id="radio-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-radio-label" aria-checked="false" tabindex="0"></div> <div>Express Shipping (1-2 business days)</div> </div>
These tests validate accessible names for elements with role="treegrid". Treegrids combine the features of both trees and grids, allowing for hierarchical data to be presented in rows and columns.
According to the ARIA Authoring Practices Guide (APG), the role="treegrid" widget presents tabular information that also has a hierarchical structure. Key implementation requirements include:
aria-label or aria-labelledbyrole="row"role="gridcell"aria-expanded set appropriatelyaria-level, aria-setsize, and aria-posinset for hierarchy informationImportant: Treegrids are complex widgets that require careful implementation to ensure proper accessibility. They should include both row and column headers for proper navigation and identification of data cells.
This div with role="treegrid" has an aria-label attribute that serves as its accessible name.
<div role="treegrid" id="treegrid-aria-label-pass" class="a11yTestPass" aria-label="File Explorer" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Documents</div> <div role="gridcell">Folder</div> <div role="gridcell">Yesterday</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Report.pdf</div> <div role="gridcell">PDF</div> <div role="gridcell">Yesterday</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Pictures</div> <div role="gridcell">Folder</div> <div role="gridcell">Last week</div> </div> </div>
This div with role="treegrid" uses aria-labelledby to reference a heading as its accessible name.
<h3 id="employee-directory-heading">Employee Directory</h3> <div role="treegrid" id="treegrid-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="employee-directory-heading" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Engineering</div> <div role="gridcell">15 members</div> <div role="gridcell">Mike Johnson</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Frontend</div> <div role="gridcell">8 members</div> <div role="gridcell">Sarah Lee</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Marketing</div> <div role="gridcell">12 members</div> <div role="gridcell">John Smith</div> </div> </div>
This div with role="treegrid" has no accessible name - no aria-label or aria-labelledby.
<div role="treegrid" id="treegrid-no-label-fail" class="a11yTestFail" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Project Alpha</div> <div role="gridcell">In Progress</div> <div role="gridcell">May 15, 2025</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Task 1</div> <div role="gridcell">Completed</div> <div role="gridcell">May 10, 2025</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Project Beta</div> <div role="gridcell">Not Started</div> <div role="gridcell">June 1, 2025</div> </div> </div>
This div with role="treegrid" has an aria-label attribute, but it's empty, providing no accessible name.
<div role="treegrid" id="treegrid-empty-aria-label-fail" class="a11yTestFail" aria-label="" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Q1 2025</div> <div role="gridcell">$1.2M</div> <div role="gridcell">+15%</div> </div> <div role="row" aria-level="2"> <div role="gridcell">January</div> <div role="gridcell">$400K</div> <div role="gridcell">+10%</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Q2 2025</div> <div role="gridcell">$1.5M</div> <div role="gridcell">+20%</div> </div> </div>
This div with role="treegrid" has an aria-label attribute that contains only whitespace, which is effectively empty.
<div role="treegrid" id="treegrid-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">North Region</div> <div role="gridcell">$850K</div> <div role="gridcell">+5%</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Store #1201</div> <div role="gridcell">$350K</div> <div role="gridcell">+8%</div> </div> <div role="row" aria-level="1"> <div role="gridcell">South Region</div> <div role="gridcell">$920K</div> <div role="gridcell">+7%</div> </div> </div>
This div with role="treegrid" has an aria-label with only punctuation, which is not a meaningful accessible name.
<div role="treegrid" id="treegrid-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Desktop</div> <div role="gridcell">128 GB</div> <div role="gridcell">8 items</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Documents</div> <div role="gridcell">42 GB</div> <div role="gridcell">15 items</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Downloads</div> <div role="gridcell">36 GB</div> <div role="gridcell">12 items</div> </div> </div>
This div with role="treegrid" references a non-existent element ID with aria-labelledby.
<div role="treegrid" id="treegrid-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-treegrid-id" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Product Category</div> <div role="gridcell">Inventory</div> <div role="gridcell">Status</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Electronics</div> <div role="gridcell">450 units</div> <div role="gridcell">In Stock</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Clothing</div> <div role="gridcell">820 units</div> <div role="gridcell">In Stock</div> </div> </div>
This div with role="treegrid" references an element that has no content via aria-labelledby.
<span id="empty-treegrid-label"></span> <div role="treegrid" id="treegrid-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-treegrid-label" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Asia</div> <div role="gridcell">1.2B</div> <div role="gridcell">45%</div> </div> <div role="row" aria-level="2"> <div role="gridcell">China</div> <div role="gridcell">780M</div> <div role="gridcell">28%</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Europe</div> <div role="gridcell">740M</div> <div role="gridcell">27%</div> </div> </div>
This div with role="treegrid" references an element that has only whitespace via aria-labelledby.
<span id="whitespace-treegrid-label"> </span> <div role="treegrid" id="treegrid-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-treegrid-label" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">Music</div> <div role="gridcell">1,250 files</div> <div role="gridcell">8.2 GB</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Rock</div> <div role="gridcell">450 files</div> <div role="gridcell">3.1 GB</div> </div> <div role="row" aria-level="1"> <div role="gridcell">Videos</div> <div role="gridcell">120 files</div> <div role="gridcell">24.5 GB</div> </div> </div>
This div with role="treegrid" references an element that has only punctuation via aria-labelledby.
...<span id="punctuation-treegrid-label">...</span> <div role="treegrid" id="treegrid-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-treegrid-label" aria-rowcount="3"> <div role="row" aria-level="1" aria-expanded="true"> <div role="gridcell">2024</div> <div role="gridcell">$2.4M</div> <div role="gridcell">Completed</div> </div> <div role="row" aria-level="2"> <div role="gridcell">Q4</div> <div role="gridcell">$650K</div> <div role="gridcell">Completed</div> </div> <div role="row" aria-level="1"> <div role="gridcell">2025</div> <div role="gridcell">$3.2M</div> <div role="gridcell">In Progress</div> </div> </div>
This test validates a potential issue with gridcells in a treegrid that use aria-labelledby incorrectly. Note that unlike many other ARIA roles, gridcells are not required to have an accessible name - they can be blank.
This div with role="gridcell" references a non-existent element ID with aria-labelledby, which can cause unexpected behavior in screen readers even though gridcells don't require accessible names.
<div role="treegrid" aria-label="Gridcell Broken Labelledby Test"> <div role="row"> <div role="gridcell" id="gridcell-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-gridcell-id">Market Share</div> </div> </div>
These tests validate specific issues with the alert role. Note that alert containers, like gridcells, do not require an accessible name since their content typically serves that purpose.
According to the ARIA Authoring Practices Guide (APG), the role="alert" is intended for brief, important messages that need to be communicated to users immediately. Key implementation details include:
aria-live="assertive" and aria-atomic="true" implicitly setImportant: Alerts should only be used for important, time-sensitive information and should not be overused. For notifications that aren't as critical, consider using role="status" instead.
This is an alert container with meaningful content that will be announced by screen readers.
Important: Your session will expire in 5 minutes.
<div role="alert" id="alert-content-pass"> <p>Important: Your session will expire in 5 minutes.</p> </div>
This alert has no content, making it ineffective as an alert since nothing will be announced.
<div role="alert" id="alert-empty-content-fail" class="a11yTestFail"></div>
This alert contains only whitespace, which is effectively empty and will not provide useful information when announced.
<div role="alert" id="alert-whitespace-content-fail" class="a11yTestFail"> </div>
This alert contains only punctuation, which does not provide meaningful information when announced.
<div role="alert" id="alert-punctuation-content-fail" class="a11yTestFail">...</div>
This alert references a non-existent element ID with aria-labelledby, which can cause unexpected behavior in screen readers.
There was a problem saving your changes.
<div role="alert" id="alert-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-alert-id"> <p>There was a problem saving your changes.</p> </div>
This alert references an element with no content via aria-labelledby, causing the accessible name computation to fail.
Form validation failed. Please check your entries.
<span id="empty-alert-label"></span> <div role="alert" id="alert-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-alert-label"> <p>Form validation failed. Please check your entries.</p> </div>
This alert references an element with only whitespace via aria-labelledby, causing the accessible name computation to fail.
Network connection lost. Attempting to reconnect...
<span id="whitespace-alert-label"> </span> <div role="alert" id="alert-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-alert-label"> <p>Network connection lost. Attempting to reconnect...</p> </div>
This alert references an element with only punctuation via aria-labelledby, causing the accessible name computation to fail.
...Password changed successfully.
<span id="punctuation-alert-label">...</span> <div role="alert" id="alert-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-alert-label"> <p>Password changed successfully.</p> </div>
These tests validate accessible names for elements with role="grid". Grids are interactive widgets for tabular information that enable keyboard navigation.
According to the ARIA Authoring Practices Guide (APG), the role="grid" provides a widget for tabular information that needs to be navigable via keyboard. Key implementation requirements include:
aria-label or aria-labelledbyrole="row"role="gridcell", role="columnheader", or role="rowheader" elementsImportant: Grids can be built using either native <table> elements with appropriate ARIA roles or using <div> elements with explicit ARIA roles. When using tables, the native semantics must be overridden with explicit roles.
This table with role="grid" has a descriptive aria-label providing an accessible name.
| Name | Department | Status |
|---|---|---|
| John Smith | Engineering | Active |
| Maria Garcia | Marketing | Active |
<table role="grid" id="grid-aria-label-pass" class="a11yTestPass" aria-label="Employee Information"> <tr role="row"> <th role="columnheader">Name</th> <th role="columnheader">Department</th> <th role="columnheader">Status</th> </tr> <tr role="row"> <td role="gridcell">John Smith</td> <td role="gridcell">Engineering</td> <td role="gridcell">Active</td> </tr> <tr role="row"> <td role="gridcell">Maria Garcia</td> <td role="gridcell">Marketing</td> <td role="gridcell">Active</td> </tr> </table>
This div with role="grid" uses aria-labelledby to reference another element for its accessible name.
<h4 id="project-grid-heading">Project Status Grid</h4> <div role="grid" id="grid-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="project-grid-heading"> <div role="row"> <div role="columnheader">Project</div> <div role="columnheader">Progress</div> <div role="columnheader">Due Date</div> </div> <div role="row"> <div role="gridcell">Website Redesign</div> <div role="gridcell">75%</div> <div role="gridcell">May 15, 2025</div> </div> <div role="row"> <div role="gridcell">Mobile App</div> <div role="gridcell">40%</div> <div role="gridcell">June 30, 2025</div> </div> </div>
This table with role="grid" lacks an accessible name, which can make it difficult for screen reader users to identify its purpose.
| Country | Capital | Population |
|---|---|---|
| Canada | Ottawa | 38 million |
| France | Paris | 67 million |
<table role="grid" id="grid-no-name-fail"> <tr role="row"> <th role="columnheader">Country</th> <th role="columnheader">Capital</th> <th role="columnheader">Population</th> </tr> <tr role="row"> <td role="gridcell">Canada</td> <td role="gridcell">Ottawa</td> <td role="gridcell">38 million</td> </tr> <tr role="row"> <td role="gridcell">France</td> <td role="gridcell">Paris</td> <td role="gridcell">67 million</td> </tr> </table>
This div with role="grid" has an empty aria-label, which provides no accessible name.
<div role="grid" id="grid-empty-label-fail" class="a11yTestFail" aria-label=""> <div role="row"> <div role="columnheader">Quarter</div> <div role="columnheader">Revenue</div> <div role="columnheader">Growth</div> </div> <div role="row"> <div role="gridcell">Q1 2025</div> <div role="gridcell">$1.2M</div> <div role="gridcell">4.2%</div> </div> <div role="row"> <div role="gridcell">Q2 2025</div> <div role="gridcell">$1.5M</div> <div role="gridcell">5.8%</div> </div> </div>
This table with role="grid" has an aria-label with only whitespace, which provides no accessible name.
| Product | Price | Stock |
|---|---|---|
| Laptop | $1,299 | 45 |
| Monitor | $349 | 78 |
<table role="grid" id="grid-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <tr role="row"> <th role="columnheader">Product</th> <th role="columnheader">Price</th> <th role="columnheader">Stock</th> </tr> <tr role="row"> <td role="gridcell">Laptop</td> <td role="gridcell">$1,299</td> <td role="gridcell">45</td> </tr> <tr role="row"> <td role="gridcell">Monitor</td> <td role="gridcell">$349</td> <td role="gridcell">78</td> </tr> </table>
This div with role="grid" has an aria-label with only punctuation, which provides no meaningful accessible name.
<div role="grid" id="grid-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <div role="row"> <div role="columnheader">Task</div> <div role="columnheader">Assignee</div> <div role="columnheader">Deadline</div> </div> <div role="row"> <div role="gridcell">Documentation</div> <div role="gridcell">Sarah</div> <div role="gridcell">May 10</div> </div> <div role="row"> <div role="gridcell">Testing</div> <div role="gridcell">Michael</div> <div role="gridcell">May 15</div> </div> </div>
This table with role="grid" references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.
| Book Title | Author | Publication Year |
|---|---|---|
| The Great Gatsby | F. Scott Fitzgerald | 1925 |
| To Kill a Mockingbird | Harper Lee | 1960 |
<table role="grid" id="grid-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-grid-id"> <tr role="row"> <th role="columnheader">Book Title</th> <th role="columnheader">Author</th> <th role="columnheader">Publication Year</th> </tr> <tr role="row"> <td role="gridcell">The Great Gatsby</td> <td role="gridcell">F. Scott Fitzgerald</td> <td role="gridcell">1925</td> </tr> <tr role="row"> <td role="gridcell">To Kill a Mockingbird</td> <td role="gridcell">Harper Lee</td> <td role="gridcell">1960</td> </tr> </table>
This div with role="grid" references an element with no content via aria-labelledby, causing the accessible name computation to fail.
<span id="empty-grid-label"></span> <div role="grid" id="grid-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-grid-label"> <div role="row"> <div role="columnheader">Metric</div> <div role="columnheader">Value</div> <div role="columnheader">Change</div> </div> <div role="row"> <div role="gridcell">Site Visits</div> <div role="gridcell">12,543</div> <div role="gridcell">+15%</div> </div> <div role="row"> <div role="gridcell">Bounce Rate</div> <div role="gridcell">28%</div> <div role="gridcell">-3%</div> </div> </div>
This table with role="grid" references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.
| Team | Wins | Losses |
|---|---|---|
| Eagles | 12 | 5 |
| Bears | 8 | 9 |
<span id="whitespace-grid-label"> </span> <table role="grid" id="grid-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-grid-label"> <tr role="row"> <th role="columnheader">Team</th> <th role="columnheader">Wins</th> <th role="columnheader">Losses</th> </tr> <tr role="row"> <td role="gridcell">Eagles</td> <td role="gridcell">12</td> <td role="gridcell">5</td> </tr> <tr role="row"> <td role="gridcell">Bears</td> <td role="gridcell">8</td> <td role="gridcell">9</td> </tr> </table>
This div with role="grid" references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.
...<span id="punctuation-grid-label">...</span> <div role="grid" id="grid-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-grid-label"> <div role="row"> <div role="columnheader">Course</div> <div role="columnheader">Instructor</div> <div role="columnheader">Credits</div> </div> <div role="row"> <div role="gridcell">Mathematics 101</div> <div role="gridcell">Dr. Johnson</div> <div role="gridcell">3</div> </div> <div role="row"> <div role="gridcell">History 215</div> <div role="gridcell">Prof. Williams</div> <div role="gridcell">4</div> </div> </div>
These tests validate accessible names for elements with role="menubar" and its related roles (menu, menuitem, menuitemradio).
According to the ARIA Authoring Practices Guide (APG), the role="menubar" is used for horizontal navigation menus, often found in desktop applications. Key implementation requirements include:
aria-label or aria-labelledbyrole="menuitem", role="menuitemcheckbox", or role="menuitemradio"role="menu" and be referenced by aria-controlsaria-expanded and aria-haspopup="menu"Important: The menubar pattern is for desktop application-style menus, not for general website navigation. Website navigation should typically use the nav element with lists of links.
This editor-style menubar has a descriptive aria-label providing an accessible name.
<div role="menubar" id="menubar-aria-label-pass" class="a11yTestPass" aria-label="Text Editor"> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">File</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Edit</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="true"> View <div role="menu" aria-label="View Options"> <div role="menuitem">Show Ruler</div> <div role="menuitem">Show Status Bar</div> <div role="menuitemradio" aria-checked="true">Normal View</div> <div role="menuitemradio" aria-checked="false">Outline View</div> </div> </div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Help</div> </div>
This navigation-style menubar uses aria-labelledby to reference another element for its accessible name.
<h4 id="site-navigation-heading">Site Navigation</h4> <div role="menubar" id="menubar-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="site-navigation-heading"> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Products</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="true"> Services <div role="menu" aria-label="Services Menu"> <div role="menuitem">Consulting</div> <div role="menuitem">Training</div> <div role="menuitem">Support</div> </div> </div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">About</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Contact</div> </div>
This menu (as a submenu) has a descriptive aria-label providing an accessible name.
<div role="menu" id="menu-aria-label-pass" class="a11yTestPass" aria-label="Format Options"> <div role="menuitem">Font</div> <div role="menuitem">Paragraph</div> <div role="menuitemradio" aria-checked="true">Left Align</div> <div role="menuitemradio" aria-checked="false">Center</div> <div role="menuitemradio" aria-checked="false">Right Align</div> </div>
This menubar lacks an accessible name, making it difficult for screen reader users to identify its purpose.
<div role="menubar" id="menubar-no-name-fail"> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Home</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Features</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Pricing</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Resources</div> </div>
This menubar has an empty aria-label, which provides no accessible name.
<div role="menubar" id="menubar-empty-label-fail" class="a11yTestFail" aria-label=""> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">File</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Edit</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">View</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Tools</div> </div>
This menubar has an aria-label with only whitespace, which provides no accessible name.
<div role="menubar" id="menubar-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Games</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Movies</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Music</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Settings</div> </div>
This menubar has an aria-label with only punctuation, which provides no meaningful accessible name.
<div role="menubar" id="menubar-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Docs</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Sheets</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Slides</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Forms</div> </div>
This menubar references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.
<div role="menubar" id="menubar-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-menubar-id"> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Products</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Services</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">About</div> <div role="menuitem" aria-haspopup="menu" aria-expanded="false">Contact</div> </div>
This menu references an element with no content via aria-labelledby, causing the accessible name computation to fail.
<span id="empty-menu-label"></span> <div role="menu" id="menu-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-menu-label"> <div role="menuitem">Cut</div> <div role="menuitem">Copy</div> <div role="menuitem">Paste</div> <div role="menuitem">Delete</div> </div>
This menu references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.
<span id="whitespace-menu-label"> </span> <div role="menu" id="menu-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-menu-label"> <div role="menuitem">New Document</div> <div role="menuitem">Open...</div> <div role="menuitem">Save</div> <div role="menuitem">Save As...</div> </div>
This menu references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.
<span id="punctuation-menu-label">...</span> <div role="menu" id="menu-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-menu-label"> <div role="menuitemradio" aria-checked="true">Small</div> <div role="menuitemradio" aria-checked="false">Medium</div> <div role="menuitemradio" aria-checked="false">Large</div> <div role="menuitemradio" aria-checked="false">Extra Large</div> </div>
These tests validate accessible names specifically for elements with role="menuitemradio", which are selectable menu items in a set where only one can be selected.
According to the ARIA Authoring Practices Guide (APG), the role="menuitemradio" is used for selectable menu items that are checkable and can only have one selected from a group. Key implementation requirements include:
aria-label or aria-labelledby when the text content alone is not sufficientaria-checked to indicate their selection state (true/false)role="menu" or role="menubar"aria-checked="true"aria-posinset and aria-setsize when not all items are in the DOMImportant: When the visible text of a menuitemradio adequately describes its purpose, an additional aria-label is usually not necessary. However, there are cases where additional labeling may be needed for clarity.
This menuitemradio has a descriptive aria-label providing an accessible name that enhances the default text content.
<div role="menu" aria-label="Text Alignment"> <div role="menuitemradio" id="menuitemradio-aria-label-pass" class="a11yTestPass" aria-label="Align Text Left" aria-checked="true">Left</div> </div>
This menuitemradio uses aria-labelledby to reference another element for its accessible name.
<h4 id="font-size-label">Text Size</h4> <div role="menu" aria-label="Font Options"> <div role="menuitemradio" id="menuitemradio-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="font-size-label" aria-checked="true">Medium</div> </div>
This menuitemradio has an empty aria-label, which overrides its text content and provides no accessible name.
<div role="menu" aria-label="View Options"> <div role="menuitemradio" id="menuitemradio-empty-label-fail" class="a11yTestFail" aria-label="" aria-checked="true">Print Layout</div> </div>
This menuitemradio has an aria-label with only whitespace, which overrides its text content and provides no accessible name.
<div role="menu" aria-label="Zoom Options"> <div role="menuitemradio" id="menuitemradio-whitespace-label-fail" class="a11yTestFail" aria-label=" " aria-checked="true">100%</div> </div>
This menuitemradio has an aria-label with only punctuation, which overrides its text content and provides no meaningful accessible name.
<div role="menu" aria-label="Color Theme"> <div role="menuitemradio" id="menuitemradio-punctuation-label-fail" class="a11yTestFail" aria-label="..." aria-checked="true">Dark Mode</div> </div>
This menuitemradio references a non-existent element ID with aria-labelledby, which prevents an accessible name from being created.
<div role="menu" aria-label="Page Layout"> <div role="menuitemradio" id="menuitemradio-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-menuitemradio-id" aria-checked="true">Single Page</div> </div>
This menuitemradio references an element with no content via aria-labelledby, causing the accessible name computation to fail.
<span id="empty-menuitemradio-label"></span> <div role="menu" aria-label="Line Spacing"> <div role="menuitemradio" id="menuitemradio-empty-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="empty-menuitemradio-label" aria-checked="true">Double</div> </div>
This menuitemradio references an element that has only whitespace via aria-labelledby, causing the accessible name computation to fail.
<span id="whitespace-menuitemradio-label"> </span> <div role="menu" aria-label="Text Direction"> <div role="menuitemradio" id="menuitemradio-whitespace-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="whitespace-menuitemradio-label" aria-checked="true">Left to Right</div> </div>
This menuitemradio references an element that has only punctuation via aria-labelledby, causing the accessible name computation to fail.
<span id="punctuation-menuitemradio-label">...</span> <div role="menu" aria-label="Display Options"> <div role="menuitemradio" id="menuitemradio-punctuation-reference-labelledby-fail" class="a11yTestFail" aria-labelledby="punctuation-menuitemradio-label" aria-checked="true">Fullscreen</div> </div>