The purpose of the button is not clear within its context.
Link to The purpose of the button is not clear within its context. copied to clipboard
Description
The purpose of the button is not clear within its context.
Rule
Labels MUST be meaningful.
Background
When form fields or interactive controls have vague or misleading labels, people may not understand the type of data expected or what a control will do if activated. This is especially true for people with cognitive disabilities and people who are blind and use a screen reader. Both the visible and the programmatic label must sufficiently describe the purpose of the form field or control. Descriptive labels give people confidence when filling out a form or using interactive content and help prevent mistakes.
Buttons should have both visual and programmatic labels that are consistent and adequately describe the button's purpose.
Code Examples
button-purpose-unclear
Good Examples:
Button with descriptive inner text:
<button>Apply now!</button>Custom button with role="button", tabindex="0", and descriptive text:
<span role="button" class="apply-btn" tabindex="0">Apply now!</span>Custom button with background image, role="button", tabindex="0", and descriptive aria-label:
<span role="button" class="apply-btn" aria-label="Apply Now!" tabindex="0"></span<Image with role="button", tabindex="0", and alt text:
<p>Positions open in all departments!</p>
<img role="button" src="greenarrow.png" tabindex="0" alt="Apply Now">Failure Examples:
Image button has no explicitly associated label:
<p>Apply Now!</p><img role="button" src="greenarrow.png" tabindex="0">Custom button has an unclear label:
<p>Now accepting applications</p>
<span role="button" class="apply-btn" aria-label="Go" tabindex="0"></span>How To Fix
Fix this issue by using ONE of the following techniques:
- Use the native HTML <button> element, and use the inner text of that element to convey the purpose.
- Use role="button", tabindex="0", and the inner text of the element to convey purpose.
- Use role="button", tabindex="0", and an aria-label to convey purpose.
Don't do this:
- Provide confusing or vague labels.
- Mismatch the visual and programmatic labels.