Skip to main content

Ensure UI Components Are Visible Without Requiring Hover/Focus

WCAG 2.1 Ultimate Guide
Disabilities Affected: Cognitive, Visual
Success Criterion: 3.3.8
Level: AA
WCAG Link
User interface components must be visible without requiring pointer hover or keyboard focus to become visible. Exceptions: standard user agent controls (like <select> dropdown arrows) or where the component’s visibility is essential to the function (e.g., a hidden field).

Why It Matters

Similar to “Hidden Controls” (3.2.7), but focused specifically on UI components (inputs, buttons, etc.). Relying on hover/focus to reveal standard controls increases cognitive load and makes the interface harder to learn and use, as users have to hunt for interactive elements. Always-visible controls create a more predictable and discoverable interface.

Fixing the Issue

Ensure all necessary interactive controls (buttons, links, input fields, checkboxes, etc.) are visible on the page by default. Avoid hiding controls and revealing them only on hover/focus of a parent container or another element, unless the revealing mechanism itself is clearly identifiable as containing controls (like a clearly labeled “Actions” or “Menu” button).

Good Code Example

Standard form controls are always visible:

  • <form>
  <label for="name-vis">Name:</label>
  <input type="text" id="name-vis" name="name"> <label>
     <input type="checkbox" id="subscribe-vis" name="subscribe"> Subscribe </label>

  <button type="submit">Submit</button> </form>

Bad Code Example

Input field only appears when hovering over its label area:

  • <style>
  .hover-reveal-container input {
     display: none; /* Input hidden by default */
  }
  .hover-reveal-container:hover input {
     display: inline-block; /* Input appears on container hover */
  }
  .hover-reveal-container { border: 1px dashed #ccc; padding: 5px; }
</style>

<div class="hover-reveal-container">
  <label for="hidden-input">Hover here to enter value:</label>
  <input type="text" id="hidden-input" name="value">
</div>
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
Learn More
Need Help with Compliance?
Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.
Schedule Consult