Welcome to Our Website
This is the main content area of the page.
Test cases: 15 passing, 32 failing (47 total)
This page contains test cases for validating accessible names for non-interactive ARIA roles that provide context for interactive elements, such as landmarks and tables.
These tests validate accessible names for ARIA landmark roles, which help screen reader users navigate through different sections of a page.
Landmarks are regions of a page that have special significance and are announced by screen readers as navigational markers. Key implementation details include:
Important: When using semantic HTML elements (like <nav>, <main>, <aside>), the ARIA landmark role is implied and generally shouldn't be duplicated unless needed for backward compatibility.
This nav element has a descriptive aria-label providing a unique accessible name.
<nav id="nav-aria-label-pass" class="a11yTestPass" aria-label="Main Navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
This div with role="navigation" uses aria-labelledby to reference another element for its accessible name.
<h4 id="footer-nav-heading">Footer Navigation</h4> <div role="navigation" id="navigation-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="footer-nav-heading"> <ul> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Site Map</a></li> </ul> </div>
This main element has a descriptive aria-label providing a unique accessible name.
This is the main content area of the page.
<main id="main-aria-label-pass" class="a11yTestPass" aria-label="Main Content"> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
These aside elements have unique accessible names to distinguish between them.
<aside id="aside1-aria-label-pass" class="a11yTestPass" aria-label="Related Articles"> <h3>Related Articles</h3> <ul> <li><a href="#">Article 1</a></li> <li><a href="#">Article 2</a></li> </ul> </aside> <aside id="aside2-aria-label-pass" class="a11yTestPass" aria-label="Featured Products"> <h3>Featured Products</h3> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> </ul> </aside>
These navigation elements have no accessible names, making it difficult for screen reader users to distinguish between them.
<nav id="nav1-no-name-fail"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <nav id="nav2-no-name-fail"> <ul> <li><a href="#">Categories</a></li> <li><a href="#">Tags</a></li> <li><a href="#">Archive</a></li> </ul> </nav>
This search landmark has an empty aria-label, providing no accessible name.
<div role="search" id="search-empty-label-fail" class="a11yTestFail" aria-label=""> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This form landmark has an aria-label with only whitespace, providing no accessible name.
<form id="form-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <div> <label for="name">Name:</label> <input type="text" id="name"> </div> <div> <label for="email">Email:</label> <input type="email" id="email"> </div> <button type="submit">Submit</button> </form>
This region landmark has an aria-label with only punctuation, providing no meaningful accessible name.
This is the user dashboard section.
<section role="region" id="region-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <h2>User Dashboard</h2> <p>This is the user dashboard section.</p> </section>
This contentinfo landmark references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.
<footer role="contentinfo" id="contentinfo-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-footer-id"> <p>© 2025 Company Name. All rights reserved.</p> </footer>
This banner landmark references an element with empty content via aria-labelledby, providing no accessible name.
Company slogan goes here
<span id="empty-banner-label"></span> <header role="banner" id="banner-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-banner-label"> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This navigation landmark references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-nav-label"> </span> <nav id="nav-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-nav-label"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
This main landmark references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...This is the main content area of the page.
<span id="punctuation-main-label">...</span> <main id="main-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-main-label"> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
This search landmark has an empty aria-label, providing no accessible name.
<div role="search" id="search-empty-label-fail2" aria-label=""> <form> <input type="text" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This complementary landmark has a whitespace-only aria-label, providing no meaningful accessible name.
<aside id="complementary-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This form landmark has a punctuation-only aria-label, providing no meaningful accessible name.
<form id="form-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <div> <label for="username">Username:</label> <input type="text" id="username"> </div> <div> <label for="password">Password:</label> <input type="password" id="password"> </div> <button type="submit">Login</button> </form>
This banner landmark has an empty aria-label, providing no accessible name.
Company slogan goes here
<header role="banner" id="banner-empty-label-fail" class="a11yTestFail" aria-label=""> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This banner landmark has a whitespace-only aria-label, providing no meaningful accessible name.
Company slogan goes here
<header role="banner" id="banner-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This banner landmark has a punctuation-only aria-label, providing no meaningful accessible name.
Company slogan goes here
<header role="banner" id="banner-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This main landmark has an empty aria-label, providing no accessible name.
This is the main content area of the page.
<main id="main-empty-label-fail" class="a11yTestFail" aria-label=""> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
This main landmark has a whitespace-only aria-label, providing no meaningful accessible name.
This is the main content area of the page.
<main id="main-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
This main landmark has a punctuation-only aria-label, providing no meaningful accessible name.
This is the main content area of the page.
<main id="main-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
This contentinfo landmark has an empty aria-label, providing no accessible name.
<footer role="contentinfo" id="contentinfo-empty-label-fail" class="a11yTestFail" aria-label=""> <p>© 2025 Company Name. All rights reserved.</p> <p>Contact: info@example.com</p> </footer>
This contentinfo landmark has a whitespace-only aria-label, providing no meaningful accessible name.
<footer role="contentinfo" id="contentinfo-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <p>© 2025 Company Name. All rights reserved.</p> <p>Contact: info@example.com</p> </footer>
This contentinfo landmark has a punctuation-only aria-label, providing no meaningful accessible name.
<footer role="contentinfo" id="contentinfo-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <p>© 2025 Company Name. All rights reserved.</p> <p>Contact: info@example.com</p> </footer>
This form landmark references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-form-label"></span> <form id="form-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-form-label"> <div> <label for="form-name">Name:</label> <input type="text" id="form-name"> </div> <div> <label for="form-email">Email:</label> <input type="email" id="form-email"> </div> <button type="submit">Submit</button> </form>
This form landmark references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-form-label"> </span> <form id="form-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-form-label"> <div> <label for="form-name2">Name:</label> <input type="text" id="form-name2"> </div> <div> <label for="form-email2">Email:</label> <input type="email" id="form-email2"> </div> <button type="submit">Submit</button> </form>
This form landmark references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-form-label">...</span> <form id="form-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-form-label"> <div> <label for="form-name3">Name:</label> <input type="text" id="form-name3"> </div> <div> <label for="form-email3">Email:</label> <input type="email" id="form-email3"> </div> <button type="submit">Submit</button> </form>
This region landmark references an element with empty content via aria-labelledby, providing no accessible name.
This is the featured content section.
<span id="empty-region-label"></span> <section role="region" id="region-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-region-label"> <h2>Featured Content</h2> <p>This is the featured content section.</p> </section>
This region landmark references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
This is the featured content section.
<span id="whitespace-region-label"> </span> <section role="region" id="region-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-region-label"> <h2>Featured Content</h2> <p>This is the featured content section.</p> </section>
This region landmark references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...This is the featured content section.
<span id="punctuation-region-label">...</span> <section role="region" id="region-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-region-label"> <h2>Featured Content</h2> <p>This is the featured content section.</p> </section>
This search landmark has a whitespace-only aria-label, providing no meaningful accessible name.
<div role="search" id="search-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This search landmark has a punctuation-only aria-label, providing no meaningful accessible name.
<div role="search" id="search-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This search landmark references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-search-label"></span> <div role="search" id="search-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-search-label"> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This search landmark references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-search-label"> </span> <div role="search" id="search-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-search-label"> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This search landmark references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-search-label">...</span> <div role="search" id="search-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-search-label"> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This complementary landmark has an empty aria-label, providing no accessible name.
<aside id="complementary-empty-label-fail" class="a11yTestFail" aria-label=""> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This complementary landmark has a punctuation-only aria-label, providing no meaningful accessible name.
<aside id="complementary-punctuation-label-fail" class="a11yTestFail" aria-label="..."> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This complementary landmark references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-complementary-label"></span> <aside id="complementary-empty-reference-fail" class="a11yTestFail" aria-labelledby="empty-complementary-label"> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This complementary landmark references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-complementary-label"> </span> <aside id="complementary-whitespace-reference-fail" class="a11yTestFail" aria-labelledby="whitespace-complementary-label"> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This complementary landmark references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-complementary-label">...</span> <aside id="complementary-punctuation-reference-fail" class="a11yTestFail" aria-labelledby="punctuation-complementary-label"> <h3>Related Content</h3> <ul> <li><a href="#">Related Link 1</a></li> <li><a href="#">Related Link 2</a></li> </ul> </aside>
This main landmark references a hidden element via aria-labelledby, creating issues with screen reader identification.
<span id="hidden-main-label" style="display: none;">Main Content Area</span> <main id="main-hidden-reference-fail" class="a11yTestFail" aria-labelledby="hidden-main-label"> <h2>Welcome to Our Website</h2> <p>This is the main content area of the page.</p> </main>
This navigation landmark references an element hidden with visibility:hidden via aria-labelledby, creating accessibility issues.
<span id="visibility-hidden-nav-label" style="visibility: hidden;">Primary Navigation</span> <nav id="nav-visibility-hidden-reference-fail" class="a11yTestFail" aria-labelledby="visibility-hidden-nav-label"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
This banner landmark references an element with aria-hidden="true" via aria-labelledby, creating issues for screen reader users.
<span id="aria-hidden-banner-label" aria-hidden="true">Site Header</span> <header role="banner" id="banner-aria-hidden-reference-fail" class="a11yTestFail" aria-labelledby="aria-hidden-banner-label"> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This form landmark uses multiple aria-labelledby references with one being empty, weakening its accessible name.
<h2 id="valid-form-label">Registration</h2> <span id="empty-form-label-multi"></span> <form id="form-multi-reference-with-empty-fail" class="a11yTestFail" aria-labelledby="valid-form-label empty-form-label-multi"> <div> <label for="form-name4">Name:</label> <input type="text" id="form-name4"> </div> <div> <label for="form-email4">Email:</label> <input type="email" id="form-email4"> </div> <button type="submit">Submit</button> </form>
This contentinfo landmark uses multiple aria-labelledby references with one having only punctuation, weakening its accessible name.
<h2 id="valid-contentinfo-label">Site Footer</h2> <span id="punct-contentinfo-label-multi">...</span> <footer role="contentinfo" id="contentinfo-multi-reference-with-punct-fail" class="a11yTestFail" aria-labelledby="valid-contentinfo-label punct-contentinfo-label-multi"> <p>© 2025 Company Name. All rights reserved.</p> <p>Contact: info@example.com</p> </footer>
This region landmark uses multiple aria-labelledby references with one element being hidden, complicating its accessible name.
<h2 id="valid-region-label">Features Section</h2> <span id="hidden-region-label-multi" style="display: none;">Highlighted Content</span> <section role="region" id="region-multi-reference-with-hidden-fail" class="a11yTestFail" aria-labelledby="valid-region-label hidden-region-label-multi"> <h2>Featured Content</h2> <p>This is the featured content section.</p> </section>
This search landmark uses multiple aria-labelledby references with one being non-existent, creating issues with its accessible name.
<h2 id="valid-search-label">Search</h2> <div role="search" id="search-multi-reference-with-nonexistent-fail" class="a11yTestFail" aria-labelledby="valid-search-label non-existent-search-id"> <form> <input type="text" role="searchbox" placeholder="Search..."> <button type="submit">Search</button> </form> </div>
This input with role="searchbox" has no accessible name, making it difficult for screen reader users to understand its purpose.
<input type="text" id="searchbox-no-name-fail" class="a11yTestFail" role="searchbox">
This input with role="searchbox" has an empty aria-label, providing no accessible name.
<input type="text" id="searchbox-empty-label-fail" class="a11yTestFail" role="searchbox" aria-label="">
This input with role="searchbox" has a whitespace-only aria-label, providing no meaningful accessible name.
<input type="text" id="searchbox-whitespace-label-fail" class="a11yTestFail" role="searchbox" aria-label=" ">
This input with role="searchbox" has a punctuation-only aria-label, providing no meaningful accessible name.
<input type="text" id="searchbox-punctuation-label-fail" class="a11yTestFail" role="searchbox" aria-label="...">
This input with role="searchbox" references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.
<input type="text" id="searchbox-broken-labelledby-fail" class="a11yTestFail" role="searchbox" aria-labelledby="non-existent-searchbox-id">
This input with role="searchbox" references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-searchbox-label"></span> <input type="text" id="searchbox-empty-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="empty-searchbox-label">
This input with role="searchbox" references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-searchbox-label"> </span> <input type="text" id="searchbox-whitespace-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="whitespace-searchbox-label">
This input with role="searchbox" references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-searchbox-label">...</span> <input type="text" id="searchbox-punctuation-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="punctuation-searchbox-label">
This input with role="searchbox" references a hidden element via aria-labelledby, creating accessibility issues.
<span id="hidden-searchbox-label" style="display: none;">Product Search</span> <input type="text" id="searchbox-hidden-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="hidden-searchbox-label">
This input with role="searchbox" references an element with aria-hidden="true" via aria-labelledby, creating issues for screen reader users.
<span id="aria-hidden-searchbox-label" aria-hidden="true">Website Search</span> <input type="text" id="searchbox-aria-hidden-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="aria-hidden-searchbox-label">
This input with role="searchbox" uses multiple aria-labelledby references with one being empty, weakening its accessible name.
<label id="valid-searchbox-label">Search Products:</label> <span id="empty-searchbox-label-multi"></span> <input type="text" id="searchbox-multi-reference-with-empty-fail" class="a11yTestFail" role="searchbox" aria-labelledby="valid-searchbox-label empty-searchbox-label-multi">
This input with role="searchbox" uses multiple aria-labelledby references with one being non-existent, creating issues with its accessible name.
<label id="another-valid-searchbox-label">Site Search:</label> <input type="text" id="searchbox-multi-reference-with-nonexistent-fail" class="a11yTestFail" role="searchbox" aria-labelledby="another-valid-searchbox-label non-existent-searchbox-id">
This input with role="searchbox" has an incorrectly structured aria-labelledby attribute, causing reference issues.
<label id="improper-searchbox-label">Search:</label> <input type="text" id="searchbox-improper-reference-fail" class="a11yTestFail" role="searchbox" aria-labelledby="improper-searchbox-label, incorrect-reference">
The following examples cover the remaining top-level landmark roles that should be properly named for accessibility.
This header element has a descriptive aria-label providing an accessible name for the banner landmark.
Company slogan goes here
<header id="banner-aria-label-pass" class="a11yTestPass" aria-label="Site Header"> <h1>Company Name</h1> <p>Company slogan goes here</p> </header>
This footer element has a descriptive aria-label providing an accessible name for the contentinfo landmark.
<footer id="contentinfo-aria-label-pass" class="a11yTestPass" aria-label="Site Footer"> <p>© 2025 Company Name. All rights reserved.</p> <p>Contact: info@example.com</p> </footer>
This div with role="search" has a descriptive aria-label providing an accessible name.
<div role="search" id="search-aria-label-pass" class="a11yTestPass" aria-label="Site Search"> <form> <label for="search-input">Search:</label> <input type="text" id="search-input" role="searchbox"> <button type="submit">Search</button> </form> </div>
This input with role="searchbox" has a descriptive aria-label providing an accessible name.
<input type="text" id="searchbox-aria-label-pass" class="a11yTestPass" role="searchbox" aria-label="Product Search">
This input with role="searchbox" uses aria-labelledby to reference another element for its accessible name.
Website Search<span id="searchbox-label">Website Search</span> <input type="text" id="searchbox-aria-labelledby-pass" class="a11yTestPass" role="searchbox" aria-labelledby="searchbox-label">
This input with role="searchbox" is associated with a label element for its accessible name.
<label for="searchbox-label-element-pass">Search the site:</label> <input type="text" id="searchbox-label-element-pass" class="a11yTestPass" role="searchbox">
This form element uses aria-labelledby to reference another element for its accessible name.
<h2 id="contact-form-heading">Contact Us</h2> <form id="form-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="contact-form-heading"> <div> <label for="contact-name">Name:</label> <input type="text" id="contact-name"> </div> <div> <label for="contact-message">Message:</label> <textarea id="contact-message"></textarea> </div> <button type="submit">Send</button> </form>
This section with role="region" has a descriptive aria-label providing an accessible name.
Content for the featured section goes here.
<section role="region" id="region-aria-label-pass" class="a11yTestPass" aria-label="Featured Content"> <h2>Featured Articles</h2> <p>Content for the featured section goes here.</p> </section>
This div with role="application" has a descriptive aria-label providing an accessible name.
<div role="application" id="application-aria-label-pass" class="a11yTestPass" aria-label="Task Manager App"> <h2>Task Manager</h2> <div> <button>Add Task</button> <button>Delete Completed</button> </div> <ul> <li>Complete project documentation <button>Mark Complete</button></li> <li>Schedule team meeting <button>Mark Complete</button></li> </ul> </div>
These tests validate accessible names for HTML5 media elements and their corresponding ARIA roles, which provide important context for audio and video content.
Audio and video elements require proper labeling and alternative content to be accessible to all users. Key implementation requirements include:
aria-label, aria-labelledby, or other naming methodsImportant: Both native HTML5 media elements and ARIA role equivalents should be properly labeled for accessibility.
This audio element has a descriptive aria-label providing an accessible name.
<audio id="audio-aria-label-pass" class="a11yTestPass" controls aria-label="Introduction to Web Accessibility"> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element uses aria-labelledby to reference another element for its accessible name.
<h4 id="audio-title">Company History Podcast Episode 1</h4> <audio id="audio-aria-labelledby-pass" class="a11yTestPass" controls aria-labelledby="audio-title"> <source src="https://example.com/podcast.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This video element has a descriptive aria-label providing an accessible name.
<video id="video-aria-label-pass" class="a11yTestPass" controls width="320" height="240" aria-label="Product Demo Video"> <source src="https://example.com/video.mp4" type="video/mp4"> <track src="https://example.com/captions.vtt" kind="subtitles" srclang="en" label="English"> Your browser does not support the video element. </video>
This video element uses aria-labelledby to reference another element for its accessible name.
<h4 id="video-title">Tutorial: How to Use Our Software</h4> <video id="video-aria-labelledby-pass" class="a11yTestPass" controls width="320" height="240" aria-labelledby="video-title"> <source src="https://example.com/tutorial.mp4" type="video/mp4"> <track src="https://example.com/tutorial-captions.vtt" kind="subtitles" srclang="en" label="English"> Your browser does not support the video element. </video>
This div with role="application" and aria-label creates an accessible custom audio player.
<div id="custom-audio-player-pass" class="a11yTestPass" role="application" aria-label="Audio Player: Company Podcast"> <button aria-label="Play">▶</button> <div role="slider" aria-label="Time Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> <button aria-label="Mute">🔊</button> </div>
This div with role="application" and aria-labelledby creates an accessible custom video player.
<h4 id="custom-video-title">Product Demo Video Player</h4> <div id="custom-video-player-pass" class="a11yTestPass" role="application" aria-labelledby="custom-video-title"> <div style="width:320px;height:240px;background:#eee;text-align:center;line-height:240px;">Video Area</div> <div> <button aria-label="Play">▶</button> <div role="slider" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> <button aria-label="Captions">CC</button> <button aria-label="Fullscreen">⛶</button> </div> </div>
This audio element has no accessible name, making it difficult for screen reader users to understand its purpose.
<audio id="audio-no-name-fail" class="a11yTestFail" controls> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element has an empty aria-label, providing no accessible name.
<audio id="audio-empty-label-fail" class="a11yTestFail" controls aria-label=""> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element has a whitespace-only aria-label, providing no meaningful accessible name.
<audio id="audio-whitespace-label-fail" class="a11yTestFail" controls aria-label=" "> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element has a punctuation-only aria-label, providing no meaningful accessible name.
<audio id="audio-punctuation-label-fail" class="a11yTestFail" controls aria-label="..."> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.
<audio id="audio-broken-labelledby-fail" class="a11yTestFail" controls aria-labelledby="non-existent-audio-id"> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-audio-label"></span> <audio id="audio-empty-reference-fail" class="a11yTestFail" controls aria-labelledby="empty-audio-label"> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-audio-label"> </span> <audio id="audio-whitespace-reference-fail" class="a11yTestFail" controls aria-labelledby="whitespace-audio-label"> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This audio element references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-audio-label">...</span> <audio id="audio-punctuation-reference-fail" class="a11yTestFail" controls aria-labelledby="punctuation-audio-label"> <source src="https://example.com/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
This video element has no accessible name, making it difficult for screen reader users to understand its purpose.
<video id="video-no-name-fail" class="a11yTestFail" controls width="320" height="240"> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element has an empty aria-label, providing no accessible name.
<video id="video-empty-label-fail" class="a11yTestFail" controls width="320" height="240" aria-label=""> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element has a whitespace-only aria-label, providing no meaningful accessible name.
<video id="video-whitespace-label-fail" class="a11yTestFail" controls width="320" height="240" aria-label=" "> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element has a punctuation-only aria-label, providing no meaningful accessible name.
<video id="video-punctuation-label-fail" class="a11yTestFail" controls width="320" height="240" aria-label="..."> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.
<video id="video-broken-labelledby-fail" class="a11yTestFail" controls width="320" height="240" aria-labelledby="non-existent-video-id"> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element references an element with empty content via aria-labelledby, providing no accessible name.
<span id="empty-video-label"></span> <video id="video-empty-reference-fail" class="a11yTestFail" controls width="320" height="240" aria-labelledby="empty-video-label"> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element references an element with whitespace-only content via aria-labelledby, providing no meaningful accessible name.
<span id="whitespace-video-label"> </span> <video id="video-whitespace-reference-fail" class="a11yTestFail" controls width="320" height="240" aria-labelledby="whitespace-video-label"> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This video element references an element with punctuation-only content via aria-labelledby, providing no meaningful accessible name.
...<span id="punctuation-video-label">...</span> <video id="video-punctuation-reference-fail" class="a11yTestFail" controls width="320" height="240" aria-labelledby="punctuation-video-label"> <source src="https://example.com/video.mp4" type="video/mp4"> Your browser does not support the video element. </video>
This custom audio player with role="application" has no accessible name, making it difficult for screen reader users to understand its purpose.
<div id="custom-audio-player-no-name-fail" class="a11yTestFail" role="application"> <button aria-label="Play">▶</button> <div role="slider" aria-label="Time Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> <button aria-label="Mute">🔊</button> </div>
This custom video player with role="application" has an empty aria-label, providing no accessible name.
<div id="custom-video-player-empty-label-fail" class="a11yTestFail" role="application" aria-label=""> <div style="width:320px;height:240px;background:#eee;text-align:center;line-height:240px;">Video Area</div> <div> <button aria-label="Play">▶</button> <div role="slider" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> <button aria-label="Captions">CC</button> </div> </div>
This custom audio player references a hidden element via aria-labelledby, creating accessibility issues.
<span id="hidden-audio-player-label" style="display: none;">Podcast Player</span> <div id="custom-audio-player-hidden-reference-fail" class="a11yTestFail" role="application" aria-labelledby="hidden-audio-player-label"> <button aria-label="Play">▶</button> <div role="slider" aria-label="Time Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> <button aria-label="Mute">🔊</button> </div>
This custom video player uses multiple aria-labelledby references with one being empty, weakening its accessible name.
<h2 id="valid-video-player-label">Training Video</h2> <span id="empty-video-player-label"></span> <div id="custom-video-player-multi-reference-with-empty-fail" class="a11yTestFail" role="application" aria-labelledby="valid-video-player-label empty-video-player-label"> <div style="width:320px;height:240px;background:#eee;text-align:center;line-height:240px;">Video Area</div> <div> <button aria-label="Play">▶</button> <div role="slider" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div> </div> </div>
These tests validate accessible names and related attributes for tables, which provide important context for data cells and help screen reader users understand tabular information.
Tables require proper structure and labeling to be accessible to screen reader users. Key implementation requirements include:
<caption>, aria-label, or aria-labelledby<th> elements with appropriate scope attributesheaders and id attributes to associate cells with headersrowspan and colspan appropriatelyrole="presentation"Important: Screen readers announce table structure and header relationships during navigation, making proper table structure essential for understanding tabular data.
This table uses the caption element to provide an accessible name.
| Category | Budget | Actual |
|---|---|---|
| Housing | $1,200 | $1,150 |
| Utilities | $200 | $175 |
| Groceries | $400 | $425 |
<table id="table-caption-pass"> <caption>Monthly Budget Summary</caption> <thead> <tr> <th scope="col">Category</th> <th scope="col">Budget</th> <th scope="col">Actual</th> </tr> </thead> <tbody> <tr> <th scope="row">Housing</th> <td>$1,200</td> <td>$1,150</td> </tr> <tr> <th scope="row">Utilities</th> <td>$200</td> <td>$175</td> </tr> <tr> <th scope="row">Groceries</th> <td>$400</td> <td>$425</td> </tr> </tbody> </table>
This table has a descriptive aria-label providing an accessible name.
| Employee | Monday | Tuesday | Wednesday |
|---|---|---|---|
| John | 9am-5pm | 9am-5pm | Off |
| Maria | Off | 9am-5pm | 9am-5pm |
<table id="table-aria-label-pass" class="a11yTestPass" aria-label="Employee Schedule"> <thead> <tr> <th scope="col">Employee</th> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> </tr> </thead> <tbody> <tr> <th scope="row">John</th> <td>9am-5pm</td> <td>9am-5pm</td> <td>Off</td> </tr> <tr> <th scope="row">Maria</th> <td>Off</td> <td>9am-5pm</td> <td>9am-5pm</td> </tr> </tbody> </table>
This table uses aria-labelledby to reference another element for its accessible name.
| Product ID | Name | Stock | Price |
|---|---|---|---|
| P001 | Widget A | 43 | $19.99 |
| P002 | Widget B | 28 | $24.99 |
<h4 id="product-table-heading">Product Inventory</h4> <table id="table-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="product-table-heading"> <thead> <tr> <th scope="col">Product ID</th> <th scope="col">Name</th> <th scope="col">Stock</th> <th scope="col">Price</th> </tr> </thead> <tbody> <tr> <th scope="row">P001</th> <td>Widget A</td> <td>43</td> <td>$19.99</td> </tr> <tr> <th scope="row">P002</th> <td>Widget B</td> <td>28</td> <td>$24.99</td> </tr> </tbody> </table>
This complex table uses headers and ids to associate data cells with multiple headers.
| Q1 | Q2 | |||
|---|---|---|---|---|
| Region | Sales | Profit | Sales | Profit |
| North | $10,000 | $2,000 | $12,000 | $2,400 |
| South | $8,500 | $1,700 | $9,500 | $1,900 |
<table id="complex-table-pass" class="a11yTestPass" aria-label="Quarterly Sales by Region"> <thead> <tr> <th id="empty-header"></th> <th id="q1" colspan="2" scope="col">Q1</th> <th id="q2" colspan="2" scope="col">Q2</th> </tr> <tr> <th id="region" scope="col">Region</th> <th id="q1-sales" headers="q1">Sales</th> <th id="q1-profit" headers="q1">Profit</th> <th id="q2-sales" headers="q2">Sales</th> <th id="q2-profit" headers="q2">Profit</th> </tr> </thead> <tbody> <tr> <th id="north" scope="row">North</th> <td headers="north q1 q1-sales">$10,000</td> <td headers="north q1 q1-profit">$2,000</td> <td headers="north q2 q2-sales">$12,000</td> <td headers="north q2 q2-profit">$2,400</td> </tr> <tr> <th id="south" scope="row">South</th> <td headers="south q1 q1-sales">$8,500</td> <td headers="south q1 q1-profit">$1,700</td> <td headers="south q2 q2-sales">$9,500</td> <td headers="south q2 q2-profit">$1,900</td> </tr> </tbody> </table>
This table lacks an accessible name, making it difficult for screen reader users to identify its purpose.
| Event | Date | Location |
|---|---|---|
| Conference | May 15-17, 2025 | San Francisco |
| Workshop | June 8, 2025 | Chicago |
<table id="table-no-name-fail"> <thead> <tr> <th>Event</th> <th>Date</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>Conference</td> <td>May 15-17, 2025</td> <td>San Francisco</td> </tr> <tr> <td>Workshop</td> <td>June 8, 2025</td> <td>Chicago</td> </tr> </tbody> </table>
This table has an empty caption, providing no accessible name.
| Project | Status | Deadline |
|---|---|---|
| Website Redesign | In Progress | July 30, 2025 |
| Mobile App | Planning | August 15, 2025 |
<table id="table-empty-caption-fail"> <caption></caption> <thead> <tr> <th>Project</th> <th>Status</th> <th>Deadline</th> </tr> </thead> <tbody> <tr> <td>Website Redesign</td> <td>In Progress</td> <td>July 30, 2025</td> </tr> <tr> <td>Mobile App</td> <td>Planning</td> <td>August 15, 2025</td> </tr> </tbody> </table>
This table has an empty aria-label, which provides no accessible name.
| Course | Instructor | Schedule |
|---|---|---|
| Web Development | Prof. Smith | Mon/Wed 2-4pm |
| Digital Marketing | Dr. Johnson | Tue/Thu 10-12pm |
<table id="table-empty-label-fail" class="a11yTestFail" aria-label=""> <thead> <tr> <th>Course</th> <th>Instructor</th> <th>Schedule</th> </tr> </thead> <tbody> <tr> <td>Web Development</td> <td>Prof. Smith</td> <td>Mon/Wed 2-4pm</td> </tr> <tr> <td>Digital Marketing</td> <td>Dr. Johnson</td> <td>Tue/Thu 10-12pm</td> </tr> </tbody> </table>
This table has an aria-label with only whitespace, providing no accessible name.
| Team | Wins | Losses |
|---|---|---|
| Eagles | 12 | 5 |
| Bears | 8 | 9 |
<table id="table-whitespace-label-fail" class="a11yTestFail" aria-label=" "> <thead> <tr> <th>Team</th> <th>Wins</th> <th>Losses</th> </tr> </thead> <tbody> <tr> <td>Eagles</td> <td>12</td> <td>5</td> </tr> <tr> <td>Bears</td> <td>8</td> <td>9</td> </tr> </tbody> </table>
This table has a caption with only punctuation, providing no meaningful accessible name.
| Country | Capital | Population |
|---|---|---|
| Canada | Ottawa | 38 million |
| France | Paris | 67 million |
<table id="table-punctuation-caption-fail"> <caption>...</caption> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>38 million</td> </tr> <tr> <td>France</td> <td>Paris</td> <td>67 million</td> </tr> </tbody> </table>
This table references a non-existent element ID with aria-labelledby, preventing an accessible name from being created.
| Feature | Free Plan | Pro Plan |
|---|---|---|
| Storage | 5 GB | 50 GB |
| Users | 3 | Unlimited |
<table id="table-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-table-id"> <thead> <tr> <th>Feature</th> <th>Free Plan</th> <th>Pro Plan</th> </tr> </thead> <tbody> <tr> <td>Storage</td> <td>5 GB</td> <td>50 GB</td> </tr> <tr> <td>Users</td> <td>3</td> <td>Unlimited</td> </tr> </tbody> </table>