Test cases: 9 passing, 25 failing, 2 warnings (36 total)
This page contains test cases for accessible names in form elements according to the WCAG accessible name computation algorithm. The test cases include passing, failing, and warning examples to validate accessibility testing tools.
These tests validate accessible names for the <form> element itself.
This form has a descriptive aria-label attribute.
<form id="form-aria-label-pass" aria-label="Contact Form for Customer Support"> <div class="form-group"> <label for="name-form1">Name</label> <input type="text" id="name-form1" name="name"> </div> <button type="submit">Submit</button> </form>
This form uses aria-labelledby to reference a heading as its accessible name.
<h4 id="newsletter-heading">Newsletter Subscription</h4> <form id="form-aria-labelledby-pass" aria-labelledby="newsletter-heading"> <div class="form-group"> <label for="email-form2">Email Address</label> <input type="email" id="email-form2" name="email"> </div> <button type="submit">Subscribe</button> </form>
This form has a title attribute which provides an accessible name, but is not recommended for accessibility. While technically valid, title attributes:
Better alternatives: Use aria-label or aria-labelledby instead.
<form id="form-title-warning" title="Account Registration Form"> <div class="form-group"> <label for="username-form3">Username</label> <input type="text" id="username-form3" name="username"> </div> <button type="submit">Register</button> </form>
This form has no accessible name - no aria-label, aria-labelledby, or associated heading.
<form id="form-no-name-fail"> <div class="form-group"> <label for="name-form4">Name</label> <input type="text" id="name-form4" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an empty aria-label attribute, which doesn't provide an accessible name.
<form id="form-empty-aria-label-fail" aria-label=""> <div class="form-group"> <label for="name-form5">Name</label> <input type="text" id="name-form5" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an aria-label attribute that contains only whitespace, which is effectively empty.
<form id="form-whitespace-aria-label-fail" aria-label=" "> <div class="form-group"> <label for="name-form-whitespace">Name</label> <input type="text" id="name-form-whitespace" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an aria-label with only punctuation, which is not a meaningful accessible name.
<form id="form-punctuation-aria-label-fail" aria-label="..."> <div class="form-group"> <label for="name-form-punctuation">Name</label> <input type="text" id="name-form-punctuation" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an aria-label that is just a filename, which is not a descriptive accessible name.
<form id="form-filename-aria-label-fail" aria-label="form.html"> <div class="form-group"> <label for="name-form-filename">Name</label> <input type="text" id="name-form-filename" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an aria-label that is just a URL, which is not a descriptive accessible name.
<form id="form-url-aria-label-fail" aria-label="https://example.com/form"> <div class="form-group"> <label for="name-form-url">Name</label> <input type="text" id="name-form-url" name="name"> </div> <button type="submit">Submit</button> </form>
This form has an aria-labelledby attribute that references a non-existent element ID.
<form id="form-broken-labelledby-fail" aria-labelledby="non-existent-heading"> <div class="form-group"> <label for="email-form6">Email</label> <input type="email" id="email-form6" name="email"> </div> <button type="submit">Submit</button> </form>
This form references a label element that contains only whitespace.
<span id="whitespace-label"> </span> <form id="form-whitespace-labelledby-fail" aria-labelledby="whitespace-label"> <div class="form-group"> <label for="email-whitespace">Email</label> <input type="email" id="email-whitespace" name="email"> </div> <button type="submit">Submit</button> </form>
This form references a label that contains only punctuation.
...<span id="punctuation-label">...</span> <form id="form-punctuation-labelledby-fail" aria-labelledby="punctuation-label"> <div class="form-group"> <label for="email-punctuation">Email</label> <input type="email" id="email-punctuation" name="email"> </div> <button type="submit">Submit</button> </form>
This form references a label that contains just a filename.
form.html<span id="filename-label">form.html</span> <form id="form-filename-labelledby-fail" aria-labelledby="filename-label"> <div class="form-group"> <label for="email-filename">Email</label> <input type="email" id="email-filename" name="email"> </div> <button type="submit">Submit</button> </form>
This form references a label that contains just a URL.
https://example.com/form<span id="url-label">https://example.com/form</span> <form id="form-url-labelledby-fail" aria-labelledby="url-label"> <div class="form-group"> <label for="email-url">Email</label> <input type="email" id="email-url" name="email"> </div> <button type="submit">Submit</button> </form>
These tests validate accessible names for fieldset elements, which are used to group related form controls.
This fieldset uses legend as its accessible name, which is the proper way to label a group of form controls.
<fieldset id="fieldset-legend-pass" class="fieldset-demo"> <legend>Contact Preferences</legend> <div class="checkbox-group"> <input type="checkbox" id="contact-email-pass" name="contact-email"> <label for="contact-email-pass">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="contact-phone-pass" name="contact-phone"> <label for="contact-phone-pass">Phone</label> </div> </fieldset>
This fieldset uses aria-labelledby to reference a heading for its accessible name.
<h4 id="preferences-heading">Notification Preferences</h4> <fieldset id="fieldset-aria-labelledby-pass" class="fieldset-demo" aria-labelledby="preferences-heading"> <div class="checkbox-group"> <input type="checkbox" id="notify-aria-email" name="notify-email"> <label for="notify-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-aria-sms" name="notify-sms"> <label for="notify-aria-sms">SMS</label> </div> </fieldset>
This fieldset uses an aria-label attribute to provide its accessible name directly.
<fieldset id="fieldset-aria-label-pass" class="fieldset-demo" aria-label="Delivery Options"> <div class="checkbox-group"> <input type="checkbox" id="delivery-standard" name="delivery-standard"> <label for="delivery-standard">Standard Delivery</label> </div> <div class="checkbox-group"> <input type="checkbox" id="delivery-express" name="delivery-express"> <label for="delivery-express">Express Delivery</label> </div> </fieldset>
This fieldset lacks any form of accessible name - no legend element, aria-label attribute, or aria-labelledby reference.
<fieldset id="fieldset-no-name-fail" class="fieldset-demo"> <div class="checkbox-group"> <input type="checkbox" id="notify-email-fail" name="notify-email"> <label for="notify-email-fail">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-sms-fail" name="notify-sms"> <label for="notify-sms-fail">SMS</label> </div> </fieldset>
This fieldset has an empty legend element, providing no meaningful accessible name.
<fieldset id="fieldset-empty-legend-fail" class="fieldset-demo"> <legend></legend> <div class="checkbox-group"> <input type="checkbox" id="notify-email-empty-legend" name="notify-email"> <label for="notify-email-empty-legend">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-sms-empty-legend" name="notify-sms"> <label for="notify-sms-empty-legend">SMS</label> </div> </fieldset>
This fieldset has a legend that contains only whitespace, which is not a meaningful accessible name.
<fieldset id="fieldset-whitespace-legend-fail" class="fieldset-demo"> <legend> </legend> <div class="checkbox-group"> <input type="checkbox" id="notify-email-whitespace-legend" name="notify-email"> <label for="notify-email-whitespace-legend">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-sms-whitespace-legend" name="notify-sms"> <label for="notify-sms-whitespace-legend">SMS</label> </div> </fieldset>
This fieldset has a legend that contains only punctuation, which is not a meaningful accessible name.
<fieldset id="fieldset-punctuation-legend-fail" class="fieldset-demo"> <legend>...</legend> <div class="checkbox-group"> <input type="checkbox" id="notify-email-punctuation-legend" name="notify-email"> <label for="notify-email-punctuation-legend">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-sms-punctuation-legend" name="notify-sms"> <label for="notify-sms-punctuation-legend">SMS</label> </div> </fieldset>
This fieldset has an empty aria-label attribute, which doesn't provide an accessible name.
<fieldset id="fieldset-empty-aria-label-fail" class="fieldset-demo" aria-label=""> <div class="checkbox-group"> <input type="checkbox" id="empty-aria-email" name="empty-aria-email"> <label for="empty-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="empty-aria-sms" name="empty-aria-sms"> <label for="empty-aria-sms">SMS</label> </div> </fieldset>
This fieldset has an aria-label attribute with only whitespace, which doesn't provide a meaningful accessible name.
<fieldset id="fieldset-whitespace-aria-label-fail" class="fieldset-demo" aria-label=" "> <div class="checkbox-group"> <input type="checkbox" id="whitespace-aria-email" name="whitespace-aria-email"> <label for="whitespace-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="whitespace-aria-sms" name="whitespace-aria-sms"> <label for="whitespace-aria-sms">SMS</label> </div> </fieldset>
This fieldset has an aria-label attribute with only punctuation, which doesn't provide a meaningful accessible name.
<fieldset id="fieldset-punctuation-aria-label-fail" class="fieldset-demo" aria-label="***"> <div class="checkbox-group"> <input type="checkbox" id="punct-aria-email" name="punct-aria-email"> <label for="punct-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="punct-aria-sms" name="punct-aria-sms"> <label for="punct-aria-sms">SMS</label> </div> </fieldset>
This fieldset references a non-existent element ID with aria-labelledby.
<fieldset id="fieldset-broken-labelledby-fail" class="fieldset-demo" aria-labelledby="non-existent-id"> <div class="checkbox-group"> <input type="checkbox" id="broken-labelledby-email" name="broken-labelledby-email"> <label for="broken-labelledby-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="broken-labelledby-sms" name="broken-labelledby-sms"> <label for="broken-labelledby-sms">SMS</label> </div> </fieldset>
This fieldset references an element that has no content with aria-labelledby.
<span id="empty-reference"></span> <fieldset id="fieldset-empty-reference-fail" class="fieldset-demo" aria-labelledby="empty-reference"> <div class="checkbox-group"> <input type="checkbox" id="empty-ref-email" name="empty-ref-email"> <label for="empty-ref-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="empty-ref-sms" name="empty-ref-sms"> <label for="empty-ref-sms">SMS</label> </div> </fieldset>
This fieldset references an element that contains only whitespace with aria-labelledby.
<span id="whitespace-reference"> </span> <fieldset id="fieldset-whitespace-reference-fail" class="fieldset-demo" aria-labelledby="whitespace-reference"> <div class="checkbox-group"> <input type="checkbox" id="whitespace-ref-email" name="whitespace-ref-email"> <label for="whitespace-ref-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="whitespace-ref-sms" name="whitespace-ref-sms"> <label for="whitespace-ref-sms">SMS</label> </div> </fieldset>
This fieldset references an element that contains only punctuation with aria-labelledby.
///<span id="punctuation-reference">///</span> <fieldset id="fieldset-punctuation-reference-fail" class="fieldset-demo" aria-labelledby="punctuation-reference"> <div class="checkbox-group"> <input type="checkbox" id="punctuation-ref-email" name="punctuation-ref-email"> <label for="punctuation-ref-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="punctuation-ref-sms" name="punctuation-ref-sms"> <label for="punctuation-ref-sms">SMS</label> </div> </fieldset>
These tests validate accessible names for <div role="form"> elements, which are the ARIA equivalent of <form> elements.
This div with role="form" has a descriptive aria-label attribute.
<div role="form" id="aria-form-label-pass" aria-label="Contact Form for Customer Support"> <div class="form-group"> <label for="name-aria-form1">Name</label> <input type="text" id="name-aria-form1" name="name"> </div> <button type="submit">Submit</button> </div>
This div with role="form" uses aria-labelledby to reference a heading as its accessible name.
<h4 id="aria-form-heading">Newsletter Subscription</h4> <div role="form" id="aria-form-labelledby-pass" aria-labelledby="aria-form-heading"> <div class="form-group"> <label for="email-aria-form2">Email Address</label> <input type="email" id="email-aria-form2" name="email"> </div> <button type="submit">Subscribe</button> </div>
This div with role="form" has a title attribute which provides an accessible name, but is not recommended for accessibility. While technically valid, title attributes:
Better alternatives: Use aria-label or aria-labelledby instead.
<div role="form" id="aria-form-title-warning" title="Account Registration Form"> <div class="form-group"> <label for="username-aria-form3">Username</label> <input type="text" id="username-aria-form3" name="username"> </div> <button type="submit">Register</button> </div>
This div with role="form" has no accessible name - no aria-label, aria-labelledby, or associated heading.
<div role="form" id="aria-form-no-name-fail"> <div class="form-group"> <label for="name-aria-form4">Name</label> <input type="text" id="name-aria-form4" name="name"> </div> <button type="submit">Submit</button> </div>
This div with role="form" has an empty aria-label attribute, which doesn't provide an accessible name.
<div role="form" id="aria-form-empty-aria-label-fail" aria-label=""> <div class="form-group"> <label for="name-aria-form5">Name</label> <input type="text" id="name-aria-form5" name="name"> </div> <button type="submit">Submit</button> </div>
This div with role="form" has an aria-labelledby attribute that references a non-existent element ID.
<div role="form" id="aria-form-broken-labelledby-fail" aria-labelledby="non-existent-aria-form-heading"> <div class="form-group"> <label for="email-aria-form6">Email</label> <input type="email" id="email-aria-form6" name="email"> </div> <button type="submit">Submit</button> </div>
These tests validate accessible names for <div role="group"> elements, which are the ARIA equivalent of <fieldset> elements.
This div with role="group" uses an aria-label attribute to provide its accessible name directly.
<div id="div-group-aria-label-pass" role="group" class="fieldset-demo" aria-label="Contact Preferences"> <div class="checkbox-group"> <input type="checkbox" id="contact-email-group-pass" name="contact-email"> <label for="contact-email-group-pass">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="contact-phone-group-pass" name="contact-phone"> <label for="contact-phone-group-pass">Phone</label> </div> </div>
This div with role="group" uses aria-labelledby to reference a heading for its accessible name.
<h4 id="group-preferences-heading">Notification Preferences</h4> <div id="div-group-aria-labelledby-pass" role="group" class="fieldset-demo" aria-labelledby="group-preferences-heading"> <div class="checkbox-group"> <input type="checkbox" id="notify-group-aria-email" name="notify-email"> <label for="notify-group-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-group-aria-sms" name="notify-sms"> <label for="notify-group-aria-sms">SMS</label> </div> </div>
This div with role="group" lacks any form of accessible name - no aria-label or aria-labelledby reference.
<div id="div-group-no-name-fail" role="group" class="fieldset-demo"> <div class="checkbox-group"> <input type="checkbox" id="notify-group-email-fail" name="notify-email"> <label for="notify-group-email-fail">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="notify-group-sms-fail" name="notify-sms"> <label for="notify-group-sms-fail">SMS</label> </div> </div>
This div with role="group" has an empty aria-label attribute, providing no accessible name.
<div id="div-group-empty-aria-label-fail" role="group" class="fieldset-demo" aria-label=""> <div class="checkbox-group"> <input type="checkbox" id="empty-group-aria-email" name="empty-group-aria-email"> <label for="empty-group-aria-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="empty-group-aria-sms" name="empty-group-aria-sms"> <label for="empty-group-aria-sms">SMS</label> </div> </div>
This div with role="group" references a non-existent element ID with aria-labelledby.
<div id="div-group-broken-labelledby-fail" role="group" class="fieldset-demo" aria-labelledby="non-existent-group-id"> <div class="checkbox-group"> <input type="checkbox" id="broken-group-labelledby-email" name="broken-group-labelledby-email"> <label for="broken-group-labelledby-email">Email</label> </div> <div class="checkbox-group"> <input type="checkbox" id="broken-group-labelledby-sms" name="broken-group-labelledby-sms"> <label for="broken-group-labelledby-sms">SMS</label> </div> </div>
For tests validating accessible names for individual form controls (inputs, buttons, etc.), see the separate test file:
Form Controls Accessible Names Test
The form controls test file includes examples of: