Form Controls Accessible Names Test

Test cases: 16 passing, 75 failing, 5 warnings (96 total)

This page contains test cases for accessible names in form controls according to the WCAG accessible name computation algorithm. The test cases include passing, failing, and warning examples organized by control type.

1. Text Input Fields

These tests validate accessible names for text input fields, including types text, email, search, url, tel, password, and number.

Passing Examples - Text Inputs

Text Input with Visible Label

This input field has a proper label element connected with the for attribute.

<label for="name-visible-label-pass">Full Name</label> <input type="text" id="name-visible-label-pass" class="a11yTestPass" name="name">

Text Input with Implicit Label (Warning)

This input field has its label wrapped around it, creating an implicit association. While technically valid for accessibility, this approach has limitations:

Better alternative: Use explicit labels with matching for/id attributes.

<label> Email Address <input type="email" id="email-implicit-label-warning" name="email"> </label>

Text Input with ARIA Label

This input field uses aria-label to provide its accessible name.

<input type="text" id="search-aria-label-pass" class="a11yTestPass" name="search" aria-label="Search products">

Text Input with ARIA Labelledby

This input field references its label using aria-labelledby.

Phone Number

<h4 id="phone-label">Phone Number</h4> <input type="tel" id="phone-aria-labelledby-pass" class="a11yTestPass" name="phone" aria-labelledby="phone-label">

Password Input with Label

This password input has a proper explicit label.

<label for="password-input-pass">Password</label> <input type="password" id="password-input-pass" class="a11yTestPass" name="password">

Failing Examples - Text Inputs

Text Input without Label

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

<input type="text" id="name-no-label-fail" class="a11yTestFail" name="name">

Text Input with Placeholder Only (Fail)

This input relies only on the placeholder attribute. Placeholder text is not part of the accessible name calculation, so this input has no accessible name at all:

<input type="text" id="placeholder-only-warning" name="search" placeholder="Search...">

Empty Label

This input has a label element, but the label is empty.

<label for="city-empty-label-fail"></label> <input type="text" id="city-empty-label-fail" class="a11yTestFail" name="city">

Label with Whitespace Only

This input has a label element, but it contains only whitespace, which does not provide a meaningful accessible name.

<label for="whitespace-label-fail"> </label> <input type="text" id="whitespace-label-fail" class="a11yTestFail" name="address">

Label with Punctuation Only

This input has a label element, but it contains only punctuation, which does not provide a meaningful accessible name.

<label for="punctuation-label-fail">###</label> <input type="text" id="punctuation-label-fail" class="a11yTestFail" name="code">

Label Contains the Word "Label"

This input has a generic label that just contains the word "label", which is not descriptive of its purpose.

<label for="generic-label-fail">Label</label> <input type="text" id="generic-label-fail" class="a11yTestFail" name="generic">

Label with Filename (Warning)

This input has a label that is a filename, which is not user-friendly or descriptive of the input's purpose.

<label for="filename-label-warning">document.txt</label> <input type="text" id="filename-label-warning" name="file">

Label with URL (Warning)

This input has a label that is a URL, which is not user-friendly or descriptive of the input's purpose.

<label for="url-label-warning">https://example.com/form</label> <input type="text" id="url-label-warning" name="website">

Label with Broken For Attribute

This input has a label, but the for attribute points to a non-existent id.

<label for="wrong-id">Postal Code</label> <input type="text" id="zip-broken-for-fail" class="a11yTestFail" name="zip">

Input with Broken ARIA Labelledby

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

<input type="text" id="input-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-id">

ARIA Role Equivalents - Text Inputs

ARIA Textbox without Accessible Name

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

<div role="textbox" id="textbox-no-label-fail" class="a11yTestFail" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 20px;"></div>

ARIA Textbox with Empty aria-label

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

<div role="textbox" id="textbox-empty-aria-label-fail" class="a11yTestFail" aria-label="" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 20px;"></div>

ARIA Textbox with Whitespace-only aria-label

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

<div role="textbox" id="textbox-whitespace-aria-label-fail" class="a11yTestFail" aria-label=" " tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 20px;"></div>

ARIA Textbox with Punctuation-only aria-label

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

<div role="textbox" id="textbox-punctuation-aria-label-fail" class="a11yTestFail" aria-label="..." tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 20px;"></div>

ARIA Textbox with Broken aria-labelledby

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

<div role="textbox" id="textbox-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-id" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 20px;"></div>

2. Radio Buttons

These tests validate accessible names for radio button input fields and their groups.

Passing Examples - Radio Buttons

Radio Buttons with Individual Labels

Each radio button has its own properly associated label.

Preferred Contact Method

<fieldset class="fieldset-demo"> <legend>Preferred Contact Method</legend> <div class="radio-group"> <input type="radio" id="radio-email-pass" class="a11yTestPass" name="contact-method" value="email"> <label for="radio-email-pass">Email</label> </div> <div class="radio-group"> <input type="radio" id="radio-phone-pass" class="a11yTestPass" name="contact-method" value="phone"> <label for="radio-phone-pass">Phone</label> </div> <div class="radio-group"> <input type="radio" id="radio-mail-pass" class="a11yTestPass" name="contact-method" value="mail"> <label for="radio-mail-pass">Mail</label> </div> </fieldset>

Failing Examples - Radio Buttons

Radio Buttons without Labels

These radio buttons have no accessible names - no labels or ARIA attributes. While the group itself has a proper legend, each individual radio button lacks an accessible name.

Agreement Options
Yes
No

<fieldset class="fieldset-demo"> <legend>Agreement Options</legend> <div class="radio-group"> <input type="radio" id="radio-yes-no-label-fail" class="a11yTestFail" name="yes-no" value="yes"> Yes </div> <div class="radio-group"> <input type="radio" id="radio-no-no-label-fail" class="a11yTestFail" name="yes-no" value="no"> No </div> </fieldset>

Radio Button with Empty Label

These radio buttons have labels, but they are empty, providing no accessible name.

Empty Label Test

<fieldset class="fieldset-demo"> <legend>Empty Label Test</legend> <div class="radio-group"> <input type="radio" id="radio-empty-label1-fail" class="a11yTestFail" name="empty-label" value="option1"> <label for="radio-empty-label1-fail"></label> </div> <div class="radio-group"> <input type="radio" id="radio-empty-label2-fail" class="a11yTestFail" name="empty-label" value="option2"> <label for="radio-empty-label2-fail"></label> </div> </fieldset>

Radio Button with Whitespace-only Label

These radio buttons have labels, but they contain only whitespace, which doesn't provide a meaningful accessible name.

Whitespace Label Test

<fieldset class="fieldset-demo"> <legend>Whitespace Label Test</legend> <div class="radio-group"> <input type="radio" id="radio-whitespace-label1-fail" class="a11yTestFail" name="whitespace-label" value="option1"> <label for="radio-whitespace-label1-fail"> </label> </div> <div class="radio-group"> <input type="radio" id="radio-whitespace-label2-fail" class="a11yTestFail" name="whitespace-label" value="option2"> <label for="radio-whitespace-label2-fail"> </label> </div> </fieldset>

Radio Button with Punctuation-only Label

These radio buttons have labels, but they contain only punctuation, which doesn't provide a meaningful accessible name.

Punctuation Label Test

<fieldset class="fieldset-demo"> <legend>Punctuation Label Test</legend> <div class="radio-group"> <input type="radio" id="radio-punctuation-label1-fail" class="a11yTestFail" name="punctuation-label" value="option1"> <label for="radio-punctuation-label1-fail">***</label> </div> <div class="radio-group"> <input type="radio" id="radio-punctuation-label2-fail" class="a11yTestFail" name="punctuation-label" value="option2"> <label for="radio-punctuation-label2-fail">###</label> </div> </fieldset>

Radio Button Group without Grouping Context

These radio buttons have individual labels but no grouping context (like a fieldset with legend).

<div class="radio-group"> <input type="radio" id="radio-option1-no-group-fail" class="a11yTestFail" name="options" value="option1"> <label for="radio-option1-no-group-fail">Option 1</label> </div> <div class="radio-group"> <input type="radio" id="radio-option2-no-group-fail" class="a11yTestFail" name="options" value="option2"> <label for="radio-option2-no-group-fail">Option 2</label> </div>

3. Checkboxes

These tests validate accessible names for checkbox input fields.

Passing Examples - Checkboxes

Checkboxes with Individual Labels

Each checkbox has its own properly associated label.

Interests

<fieldset class="fieldset-demo"> <legend>Interests</legend> <div class="checkbox-group"> <input type="checkbox" id="checkbox-sports-pass" class="a11yTestPass" name="interests" value="sports"> <label for="checkbox-sports-pass">Sports</label> </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-music-pass" class="a11yTestPass" name="interests" value="music"> <label for="checkbox-music-pass">Music</label> </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-art-pass" class="a11yTestPass" name="interests" value="art"> <label for="checkbox-art-pass">Art</label> </div> </fieldset>

Failing Examples - Checkboxes

Checkboxes without Labels

These checkboxes have no accessible names - no labels or ARIA attributes. While the group itself has a proper legend, each individual checkbox lacks an accessible name.

Preferences
I agree to the terms
Subscribe to newsletter

<fieldset class="fieldset-demo"> <legend>Preferences</legend> <div class="checkbox-group"> <input type="checkbox" id="checkbox-terms-no-label-fail" class="a11yTestFail" name="terms"> I agree to the terms </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-newsletter-no-label-fail" class="a11yTestFail" name="newsletter"> Subscribe to newsletter </div> </fieldset>

Checkbox with Empty Label

These checkboxes have labels, but they are empty, providing no accessible name.

Empty Label Test

<fieldset class="fieldset-demo"> <legend>Empty Label Test</legend> <div class="checkbox-group"> <input type="checkbox" id="checkbox-empty-label1-fail" class="a11yTestFail" name="empty-label-1"> <label for="checkbox-empty-label1-fail"></label> </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-empty-label2-fail" class="a11yTestFail" name="empty-label-2"> <label for="checkbox-empty-label2-fail"></label> </div> </fieldset>

Checkbox with Whitespace-only Label

These checkboxes have labels, but they contain only whitespace, which doesn't provide a meaningful accessible name.

Whitespace Label Test

<fieldset class="fieldset-demo"> <legend>Whitespace Label Test</legend> <div class="checkbox-group"> <input type="checkbox" id="checkbox-whitespace-label1-fail" class="a11yTestFail" name="whitespace-label-1"> <label for="checkbox-whitespace-label1-fail"> </label> </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-whitespace-label2-fail" class="a11yTestFail" name="whitespace-label-2"> <label for="checkbox-whitespace-label2-fail"> </label> </div> </fieldset>

Checkbox with Punctuation-only Label

These checkboxes have labels, but they contain only punctuation, which doesn't provide a meaningful accessible name.

Punctuation Label Test

<fieldset class="fieldset-demo"> <legend>Punctuation Label Test</legend> <div class="checkbox-group"> <input type="checkbox" id="checkbox-punctuation-label1-fail" class="a11yTestFail" name="punctuation-label-1"> <label for="checkbox-punctuation-label1-fail">***</label> </div> <div class="checkbox-group"> <input type="checkbox" id="checkbox-punctuation-label2-fail" class="a11yTestFail" name="punctuation-label-2"> <label for="checkbox-punctuation-label2-fail">###</label> </div> </fieldset>

4. Select and Option Elements

These tests validate accessible names for dropdown menus and their options.

Passing Examples - Select/Option

Select with Explicit Label

This select element has a properly associated label.

<label for="select-country-pass">Country</label> <select id="select-country-pass" class="a11yTestPass" name="country"> <option value="">Select a country</option> <option value="us">United States</option> <option value="ca">Canada</option> <option value="mx">Mexico</option> </select>

Failing Examples - Select/Option

Select without Label

This select element has no accessible name - no label or ARIA attributes.

<select id="select-state-no-label-fail" class="a11yTestFail" name="state"> <option value="">Select a state</option> <option value="ca">California</option> <option value="ny">New York</option> <option value="tx">Texas</option> </select>

Select with Empty aria-label

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

<select id="select-empty-aria-label-fail" class="a11yTestFail" name="region" aria-label=""> <option value="">Select a region</option> <option value="north">North</option> <option value="south">South</option> <option value="east">East</option> <option value="west">West</option> </select>

Select with Whitespace-only aria-label

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

<select id="select-whitespace-aria-label-fail" class="a11yTestFail" name="city" aria-label=" "> <option value="">Select a city</option> <option value="nyc">New York City</option> <option value="la">Los Angeles</option> <option value="chi">Chicago</option> </select>

Select with Punctuation-only aria-label

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

<select id="select-punctuation-aria-label-fail" class="a11yTestFail" name="area" aria-label="***"> <option value="">Select an area</option> <option value="urban">Urban</option> <option value="suburban">Suburban</option> <option value="rural">Rural</option> </select>

Select with Broken aria-labelledby

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

<select id="select-broken-labelledby-fail" class="a11yTestFail" name="language" aria-labelledby="non-existent-id"> <option value="">Select a language</option> <option value="en">English</option> <option value="es">Spanish</option> <option value="fr">French</option> </select>

Select with Empty Option Value

The first option is a placeholder but has no value and is not clearly labeled as an instruction.

<label for="select-category-empty-option-fail">Category</label> <select id="select-category-empty-option-fail" class="a11yTestFail" name="category"> <option></option> <option value="books">Books</option> <option value="movies">Movies</option> <option value="music">Music</option> </select>

Select with Whitespace-only Option Text

This select contains an option with only whitespace, which does not provide a meaningful accessible name for the option.

<label for="select-whitespace-option-fail">Topic</label> <select id="select-whitespace-option-fail" class="a11yTestFail" name="topic"> <option value="">Choose a topic</option> <option value="space"> </option> <option value="science">Science</option> <option value="tech">Technology</option> </select>

5. Textarea Elements

These tests validate accessible names for multiline text entry fields.

Passing Examples - Textarea

Textarea with Explicit Label

This textarea has a properly associated label.

<label for="textarea-comments-pass">Comments</label> <textarea id="textarea-comments-pass" class="a11yTestPass" name="comments" rows="4"></textarea>

Failing Examples - Textarea

Textarea without Label

This textarea has no accessible name - no label or ARIA attributes.

<textarea id="textarea-bio-no-label-fail" class="a11yTestFail" name="bio" rows="4" placeholder="Enter your bio"></textarea>

Textarea with Empty Label

This textarea has a label element, but the label is empty.

<label for="textarea-empty-label-fail"></label> <textarea id="textarea-empty-label-fail" class="a11yTestFail" name="feedback" rows="4"></textarea>

Textarea with Whitespace-only Label

This textarea has a label element, but it contains only whitespace, which doesn't provide a meaningful accessible name.

<label for="textarea-whitespace-label-fail"> </label> <textarea id="textarea-whitespace-label-fail" class="a11yTestFail" name="notes" rows="4"></textarea>

Textarea with Punctuation-only Label

This textarea has a label element, but it contains only punctuation, which doesn't provide a meaningful accessible name.

<label for="textarea-punctuation-label-fail">***</label> <textarea id="textarea-punctuation-label-fail" class="a11yTestFail" name="description" rows="4"></textarea>

Textarea with Empty aria-label

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

<textarea id="textarea-empty-aria-label-fail" class="a11yTestFail" name="message" rows="4" aria-label=""></textarea>

Textarea with Whitespace-only aria-label

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

<textarea id="textarea-whitespace-aria-label-fail" class="a11yTestFail" name="review" rows="4" aria-label=" "></textarea>

Textarea with Punctuation-only aria-label

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

<textarea id="textarea-punctuation-aria-label-fail" class="a11yTestFail" name="details" rows="4" aria-label="###"></textarea>

Textarea with Broken aria-labelledby

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

<textarea id="textarea-broken-labelledby-fail" class="a11yTestFail" name="summary" rows="4" aria-labelledby="non-existent-id"></textarea>

ARIA Role Equivalents - Textarea

ARIA Multiline Textbox without Accessible Name

This div with role="textbox" and aria-multiline="true" has no accessible name - no aria-label or aria-labelledby.

<div role="textbox" aria-multiline="true" id="multiline-textbox-no-label-fail" class="a11yTestFail" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 80px;"></div>

ARIA Multiline Textbox with Empty aria-label

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

<div role="textbox" aria-multiline="true" id="multiline-textbox-empty-aria-label-fail" class="a11yTestFail" aria-label="" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 80px;"></div>

ARIA Multiline Textbox with Broken aria-labelledby

This div with role="textbox" and aria-multiline="true" references a non-existent element with aria-labelledby.

<div role="textbox" aria-multiline="true" id="multiline-textbox-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-id" tabindex="0" style="border: 1px solid #ccc; padding: 5px; width: 300px; min-height: 80px;"></div>

6. Image Maps and Image Inputs

These tests validate accessible names for image maps and image inputs.

Passing Examples - Image Maps/Inputs

Image Input with Alt Text

This image input has an alt attribute that serves as its accessible name.

<input type="image" id="image-submit-alt-pass" class="a11yTestPass" src="data:image/svg+xml,%3Csvg..." alt="Submit form">

Image Map with Complete Alt Text

This image map has proper alt attributes for all area elements, providing accessible names for each clickable region.

Interactive shapes Green Circle Blue Square

<img id="image-map-complete-alt-pass" class="a11yTestPass" src="data:image/svg+xml,%3Csvg..." usemap="#complete-shapes-map" alt="Interactive shapes"> <map name="complete-shapes-map"> <area shape="circle" coords="50,50,30" href="#" alt="Green Circle"> <area shape="rect" coords="120,20,180,80" href="#" alt="Blue Square"> </map>

Failing Examples - Image Maps/Inputs

Image Input without Alt Text

This image input has no alt attribute to provide an accessible name.

<input type="image" id="image-submit-no-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg...">

Image Input with Empty Alt Text

This image input has an empty alt attribute, which is incorrect for functional images like submit buttons.

<input type="image" id="image-submit-empty-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." alt="">

Image Input with Whitespace-only Alt Text

This image input has alt text containing only whitespace, which doesn't provide a meaningful accessible name.

<input type="image" id="image-submit-whitespace-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." alt=" ">

Image Input with Punctuation-only Alt Text

This image input has alt text containing only punctuation, which doesn't provide a meaningful accessible name.

<input type="image" id="image-submit-punctuation-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." alt="...">

Image Input with Generic Alt Text

This image input has generic alt text that doesn't describe its purpose.

<input type="image" id="image-submit-generic-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." alt="Button">

Image Input with Filename as Alt Text

This image input uses its filename as alt text, which is not descriptive of its purpose.

<input type="image" id="image-submit-filename-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." alt="button.png">

Image Map with Missing Alt Text

This image map has an area without an alt attribute to provide an accessible name.

Shapes Red Circle

<img id="image-map-missing-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#shapes-map" alt="Shapes"> <map name="shapes-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-missing-alt-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#"> </map>

Image Map Area with Empty Alt Text

This image map has an area with an empty alt attribute, providing no accessible name.

Shapes Red Circle

<img id="image-map-empty-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#empty-alt-map" alt="Shapes"> <map name="empty-alt-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-empty-alt-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" alt=""> </map>

Image Map Area with Whitespace-only Alt Text

This image map has an area with alt text containing only whitespace, which doesn't provide a meaningful accessible name.

Shapes Red Circle

<img id="image-map-whitespace-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#whitespace-alt-map" alt="Shapes"> <map name="whitespace-alt-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-whitespace-alt-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" alt=" "> </map>

Image Map Area with Punctuation-only Alt Text

This image map has an area with alt text containing only punctuation, which doesn't provide a meaningful accessible name.

Shapes Red Circle ...

<img id="image-map-punctuation-alt-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#punctuation-alt-map" alt="Shapes"> <map name="punctuation-alt-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-punctuation-alt-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" alt="..."> </map>

Image Map Area with Empty aria-label

This image map has an area with an empty aria-label attribute, providing no accessible name.

Shapes Red Circle

<img id="image-map-empty-aria-label-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#empty-aria-label-map" alt="Shapes"> <map name="empty-aria-label-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-empty-aria-label-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" aria-label=""> </map>

Image Map Area with Whitespace-only aria-label

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

Shapes Red Circle

<img id="image-map-whitespace-aria-label-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#whitespace-aria-label-map" alt="Shapes"> <map name="whitespace-aria-label-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-whitespace-aria-label-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" aria-label=" "> </map>

Image Map Area with Punctuation-only aria-label

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

Shapes Red Circle

<img id="image-map-punctuation-aria-label-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#punctuation-aria-label-map" alt="Shapes"> <map name="punctuation-aria-label-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-punctuation-aria-label-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" aria-label="..."> </map>

Image Map Area with Broken aria-labelledby

This image map has an area with an aria-labelledby attribute that references a non-existent element, providing no accessible name.

Shapes Red Circle

<img id="image-map-broken-labelledby-fail" class="a11yTestFail" src="data:image/svg+xml,%3Csvg..." usemap="#broken-labelledby-map" alt="Shapes"> <map name="broken-labelledby-map"> <area shape="circle" coords="50,50,30" href="#" alt="Red Circle"> <area id="area-broken-labelledby-fail" class="a11yTestFail" shape="rect" coords="120,20,180,80" href="#" aria-labelledby="non-existent-id"> </map>

7. Progress and Meter Elements

These tests validate accessible names for progress bars and meter elements.

Passing Examples - Progress/Meter

Progress Element with Label

This progress element has a properly associated label.

75%

<label for="download-progress-pass">Download Progress</label> <progress id="download-progress-pass" class="a11yTestPass" value="75" max="100">75%</progress>

Meter Element with ARIA Labelledby

This meter element references its label using aria-labelledby.

Disk Usage
60%

<div id="disk-usage-label">Disk Usage</div> <meter id="disk-usage-meter-pass" class="a11yTestPass" aria-labelledby="disk-usage-label" value="0.6" min="0" max="1">60%</meter>

Failing Examples - Progress/Meter

Progress Element without Accessible Name

This progress element has no accessible name - no label or ARIA attributes.

30%

<progress id="upload-progress-no-label-fail" class="a11yTestFail" value="30" max="100">30%</progress>

Progress Element with Empty aria-label

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

45%

<progress id="progress-empty-aria-label-fail" class="a11yTestFail" value="45" max="100" aria-label="">45%</progress>

Progress Element with Whitespace-only aria-label

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

50%

<progress id="progress-whitespace-aria-label-fail" class="a11yTestFail" value="50" max="100" aria-label=" ">50%</progress>

Progress Element with Punctuation-only aria-label

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

55%

<progress id="progress-punctuation-aria-label-fail" class="a11yTestFail" value="55" max="100" aria-label="...">55%</progress>

Progress Element with Broken aria-labelledby

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

60%

<progress id="progress-broken-labelledby-fail" class="a11yTestFail" value="60" max="100" aria-labelledby="non-existent-id">60%</progress>

Meter Element with Empty aria-label

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

30%

<meter id="meter-empty-aria-label-fail" class="a11yTestFail" value="0.3" min="0" max="1" aria-label="">30%</meter>

Meter Element with Whitespace-only aria-label

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

40%

<meter id="meter-whitespace-aria-label-fail" class="a11yTestFail" value="0.4" min="0" max="1" aria-label=" ">40%</meter>

Meter Element with Punctuation-only aria-label

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

50%

<meter id="meter-punctuation-aria-label-fail" class="a11yTestFail" value="0.5" min="0" max="1" aria-label="...">50%</meter>

Meter Element with Broken aria-labelledby

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

70%

<meter id="meter-broken-labelledby-fail" class="a11yTestFail" value="0.7" min="0" max="1" aria-labelledby="non-existent-id">70%</meter>

ARIA Role Equivalents - Progress/Meter

ARIA Progressbar without Accessible Name

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

<div role="progressbar" id="progressbar-no-label-fail" class="a11yTestFail" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> <div style="height: 100%; background-color: #4caf50; width: 30%;"></div> </div>

ARIA Progressbar with Empty aria-label

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

<div role="progressbar" id="progressbar-empty-aria-label-fail" class="a11yTestFail" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label=""> <div style="height: 100%; background-color: #4caf50; width: 45%;"></div> </div>

ARIA Meter without Accessible Name

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

<div role="meter" id="meter-role-no-label-fail" class="a11yTestFail" aria-valuenow="0.3" aria-valuemin="0" aria-valuemax="1"> <div style="height: 100%; background-color: #4caf50; width: 30%;"></div> </div>

ARIA Meter with Empty aria-label

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

<div role="meter" id="meter-role-empty-aria-label-fail" class="a11yTestFail" aria-valuenow="0.4" aria-valuemin="0" aria-valuemax="1" aria-label=""> <div style="height: 100%; background-color: #4caf50; width: 40%;"></div> </div>