Button Accessible Names Test Cases

Test cases: 10 passing, 15 failing (25 total)

This page contains various button elements to test accessible name computation according to WCAG guidelines.

Passing Examples

Simple Button with Text

This button has visible text content that provides its accessible name.

<button id="btn-text-pass" class="a11yTestPass">Submit Form</button>

Button with Icon and Text

This button has both an icon and text, which together form its accessible name.

<button id="btn-icon-text-pass" class="a11yTestPass"><span>⭐</span> Add to Favorites</button>

Button with aria-label

This button has an aria-label attribute that provides its accessible name.

<button id="btn-aria-label-pass" class="a11yTestPass" aria-label="Close dialog">X</button>

Button with aria-labelledby

This button uses aria-labelledby to reference text elsewhere on the page for its accessible name.

Search database

<span id="search-label">Search database</span>
<button id="btn-aria-labelledby-pass" class="a11yTestPass" aria-labelledby="search-label">🔍</button>

Input Button with Value

This input type="button" uses its value attribute as the accessible name.

<input id="input-btn-value-pass" class="a11yTestPass" type="button" value="Click Me">

Reset Button with Value

This reset button uses its value attribute as the accessible name.

<input id="reset-btn-value-pass" class="a11yTestPass" type="reset" value="Reset Form">

Failing Examples

Empty Button

This button has no text content or accessible name.

<button id="btn-empty-fail" class="a11yTestFail"></button>

Icon-only Button without Accessible Name

This button has only an icon but no accessible name.

<button id="btn-icon-only-fail" class="a11yTestFail icon-button" >❌</button>

Input Button without Value

This input button has no value attribute to provide an accessible name.

<input id="input-btn-no-value-fail" class="a11yTestFail" type="button">

Generic Button Text

This button has text that doesn't describe its function or purpose.

<button id="btn-generic-text-fail" class="a11yTestFail">Click</button>

Why did you

Button with Empty aria-label

This button has an empty aria-label attribute.

<button id="btn-empty-arialabel-fail" class="a11yTestFail" aria-label="">Save</button>

Button with Non-existent aria-labelledby Reference

This button has an aria-labelledby attribute pointing to an ID that doesn't exist.

<button id="btn-broken-labelledby-fail" class="a11yTestFail" aria-labelledby="non-existent-id">Submit</button>

Button with Only Whitespace

This button contains only whitespace characters, which doesn't provide a proper accessible name.

<button id="btn-whitespace-fail" class="a11yTestFail"> </button>

Button with Only Punctuation

This button's aria-label contains only punctuation, which may not be announced by some screen readers.

<button id="btn-punctuation-arialabel-fail" class="a11yTestFail" aria-label="..."></button>

ARIA Role Button Tests

The following tests use <div role="button"> instead of semantic button elements.

Passing Examples - ARIA Role

Div with role="button" and Text

This div with role="button" has visible text content that provides its accessible name.

Submit Form

<div id="aria-btn-text-pass" class="a11yTestPass" role="button" tabindex="0">Submit Form</div>

Role Button with Icon and Text

This div with role="button" has both an icon and text, which together form its accessible name.

⭐ Add to Favorites

<div id="aria-btn-icon-text-pass" class="a11yTestPass" role="button" tabindex="0"><span>⭐</span> Add to Favorites</div>

Role Button with aria-label

This div with role="button" has an aria-label attribute that provides its accessible name.

X

<div id="aria-btn-arialabel-pass" class="a11yTestPass" role="button" tabindex="0" aria-label="Close dialog">X</div>

Role Button with aria-labelledby

This div with role="button" uses aria-labelledby to reference text elsewhere on the page for its accessible name.

Search database
🔍

<span id="search-label-aria">Search database</span>
<div id="aria-btn-labelledby-pass" class="a11yTestPass" role="button" tabindex="0" aria-labelledby="search-label-aria">🔍</div>

Failing Examples - ARIA Role

Empty Role Button

This div with role="button" has no text content or accessible name.

<div id="aria-btn-empty-fail" class="a11yTestFail" role="button" tabindex="0"></div>

Icon-only Role Button without Accessible Name

This div with role="button" has only an icon but no accessible name.

❌

<div id="aria-btn-icon-only-fail" class="a11yTestFail icon-button" role="button" tabindex="0" >❌</div>

Generic Role Button Text

This div with role="button" has text that doesn't describe its function or purpose.

Click

<div id="aria-btn-generic-text-fail" class="a11yTestFail" role="button" tabindex="0">Click</div>

Role Button with Empty aria-label

This div with role="button" has an empty aria-label attribute.

Save

<div id="aria-btn-empty-arialabel-fail" class="a11yTestFail" role="button" tabindex="0" aria-label="">Save</div>

Role Button with Non-existent aria-labelledby Reference

This div with role="button" has an aria-labelledby attribute pointing to an ID that doesn't exist.

Submit

<div id="aria-btn-broken-labelledby-fail" class="a11yTestFail" role="button" tabindex="0" aria-labelledby="non-existent-id-aria">Submit</div>

Role Button with Only Whitespace

This div with role="button" contains only whitespace characters, which doesn't provide a proper accessible name.

<div id="aria-btn-whitespace-fail" class="a11yTestFail" role="button" tabindex="0"> </div>

Role Button with Only Punctuation

This div with role="button" has an aria-label with only punctuation, which may not be announced by some screen readers.

<div id="aria-btn-punctuation-arialabel-fail" class="a11yTestFail" role="button" tabindex="0" aria-label="..."></div>