Ensure UI Components Are Visible Without Requiring Hover/Focus

Disabilities Affected: Cognitive, Visual

Success Criterion: 3.3.8

Level: AA

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:

Markup
Preview

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

Name: Subscribe

Bad Code Example

Input field only appears when hovering over its label area:

Markup
Preview

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

Hover here to enter value:

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

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

Schedule Consult