Button Name
Critical - WCAG Level A
The issue with the 'button-name' rule is that buttons on a webpage lack discernible text, which is crucial for accessibility. Buttons without clear labels can confuse users, particularly those relying on assistive technologies like screen readers, which read out button labels to convey their purpose. Without discernible text, users cannot understand the button's function, impeding navigation and interaction.
To fix this issue:
Ensure every button has a clear and descriptive label. This can be achieved by using text within the button element itself or by providing an accessible name using ARIA attributes. For instance, if a button is represented by an icon, use the aria-label attribute to provide a text alternative that conveys the button's purpose.
Best practices:
Use concise and descriptive text that accurately reflects the button's action.
Avoid using generic labels like "Click here" or "Submit" without context. Instead, use specific labels like "Search" or "Add to Cart."
Ensure that the button's visual design does not rely solely on color or iconography to convey meaning, as this can be problematic for users with visual impairments.
Common mistakes:
Using placeholder text that doesn't describe the button's action, relying solely on CSS background images for button labels, or neglecting to update button labels when their function changes.
Always test buttons with screen readers to ensure the labels are read correctly and convey the intended purpose.
Furthermore, buttons containing images should still have separate labels describing their action. The image alt property should be saved for a description of the image itself which may or may not align directly with the action of the button.