• Success Criterion 1.4.10
  • Conformance level AA

Desktop Hover Menu That Becomes Unreachable on Small Screens

1.4.10 — Reflow

Scenario

Setting

A streaming music app's search results

What’s wrong

Hover-dependent desktop menus retained at small widths where hover targets become unreachable (functionality lost).

Example 

.filter-menu:hover .filter-options { display: block; }
.filter-options { display: none; position: absolute; }
/* no click or tap handler exists, only :hover */

Why it matters

On a touchscreen at mobile width, there's no hover state, so filter options that only appear on hover become permanently unreachable.

How to test

Set the viewport to 320px and try to open hover-dependent desktop menus: if the hover target becomes unreachable at small width with no tap alternative, it fails.

How to fix

Trigger the menu from a real click or tap event with aria-expanded, and keep hover as an enhancement, not the only path.

.filter-menu[aria-expanded="true"] .filter-options { display: block; }

<button class="filter-menu" aria-expanded="false" aria-controls="filter-options">Filters</button>

Outcome

A phone user taps the Filters button and the options open, instead of the menu never appearing at all.

Who is affected

Touchscreen and mobile users lose the entire filtering feature, since tapping never triggers a CSS :hover state.

Learn more

Related scenarios