Ensure Controls Needed to Progress Are Visible Without Hover/Focus
Why It Matters
Hiding essential controls (like “Submit”, “Next”, “Add to Cart”) until the user hovers over a specific area or focuses an element can make it difficult for users to discover how to proceed. Users with cognitive impairments might not understand where to hover/focus, low vision users might not see the trigger area, and keyboard users might tab past the trigger without realizing a control becomes available.
Fixing the Issue
Ensure controls required to continue or complete a process are always visible by default. Avoid patterns where action buttons only appear on hover over an item or section. If controls must be initially hidden, ensure the element that reveals them upon hover/focus clearly indicates that interaction will expose controls (e.g., an “Actions…” button that opens a menu).
Bad Code Example
Action buttons only appear on hover:
-
<style> .product-item-bad .actions { display: none; /* Actions hidden by default */ position: absolute; bottom: 5px; left: 5px; } .product-item-bad:hover .actions { display: block; /* Actions appear only on hover */ } .product-item-bad { position: relative; border: 1px solid #ccc; padding: 10px; min-height: 150px; } </style> <div class="product-item-bad"> <img src="/wp-content/uploads/product_widget.svg" style="width:100px;" alt="Widget Pro"> <h3>Widget Pro</h3> <p>Price: $19.99</p> <div class="actions"> <button>View Details</button> <button>Add to Cart</button> </div> </div>
-
Widget Pro
Price: $19.99
