What the issue is
Buttons that do not provide visual feedback when interacted with (e.g., via mouse hover, focus, or activation) can cause confusion and uncertainty for users. Visual cues such as changes in color, elevation, enclosing box, or animation help indicate that a button can be interacted with and has indeed been activated or is currently focused. Without these cues, users, especially those with visual impairments or cognitive disabilities, may struggle to understand whether their actions have been registered.
Why this is important
Visual feedback on button interaction enhances the usability of a website by providing immediate and clear confirmation of the user's actions. This feedback is particularly crucial for users with visual and cognitive impairments, as it aids in understanding the web page's response to their input. Providing distinct visual changes during button interaction supports all users in navigating and interacting with web content more efficiently and confidently.
Who it affects
This issue affects:
- Users with visual impairments who rely on visual cues to understand the state of interactions.
- Users with cognitive disabilities who benefit from clear and immediate feedback to confirm their actions.
- Users who have difficulty perceiving subtle visual changes and rely on distinct visual cues for navigation and interaction.
- All users, as visible feedback from button interactions contributes to a more responsive and intuitive user experience.
How to remediate the issue
- Implement visual changes for button states such as ‘hover’, ‘focus’, and ‘active’. This can include color changes, border highlighting, elevation effects, or animations that indicate the button's clickability and state.
- Ensure visual feedback is distinctive enough to be noticed by users with various types of visual impairments, including those with low vision and color-blindness. This includes ensuring that the non-textual visual cues meet the contrast requirement of 3:1.
- Test the web content with users or through user simulation tools to ensure the visual feedback provided is effective and noticeable for a diverse range of users.
- Avoid relying solely on color changes that may not be perceivable by users with color vision deficiencies. Incorporate additional cues like icons or text label changes when possible.
Guidance on providing clear visual feedback and ensuring interactive elements are distinguishable in their states can be found at WCAG Quick Reference on Focus Visible.