Skip to main content

Ensure Controls Needed to Progress Are Visible Without Hover/Focus

Disabilities Affected: Cognitive, Mobility, Visual
Success Criterion: 3.2.7
Level: AA
Controls needed to progress or complete a process must be visible without requiring pointer hover or keyboard focus, unless the information needed to identify the control is visible. Exception: Standard user agent controls (like dropdown arrows on <select>).

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).


Good Code Example

“Add to Cart” button is always visible:

  • <div class="product-item">
      <img src="/wp-content/uploads/product_widget.svg" style="width:100px;" alt="Widget Pro">
      <h3>Widget Pro</h3>
      <p>Price: $19.99</p>
      <button>Add to Cart</button>
    </div>
  • Widget Pro

    Widget Pro

    Price: $19.99

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

    Widget Pro

    Price: $19.99

Search Ultimate Guide
Tablet displaying an eBook cover titled 'Integrating Accessibility Compliance Into Your Budget' by AccessiTREE. The cover features a digital tree with accessibility-related icons, symbolizing inclusive design and compliance.
Free eBook
Integrating Accessibility Compliance Into Your Budget
A Practical Guide for Healthcare Leaders Navigating the New HHS Ruling

Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.