Hover over het producticoon. Een popup verschijnt met specificaties, prijs en een “Bekijk product”-link.
Tab naar het producticoon. Niets. Geen popup. Geen specificaties. Geen link.
Die “Bekijk product”-link bestaat alleen in een wereld met een muis.
Dit is een probleem dat ik vooral zie bij:
- Productkaarten in webshops (hover voor details)
- Navigatiemenu’s (hover om submenu te openen)
- Afbeeldingsgalerijen (hover voor zoom of caption)
- Dashboards (hover voor datapunt-details)
Het probleem zit meestal in de CSS:
/* Alleen hover — toetsenbord ziet dit niet */
.kaart:hover .details { display: block; }
De fix — voeg focus-within toe:
.kaart:hover .details,
.kaart:focus-within .details {
display: block;
}
focus-within is de sleutel. Het activeert de stijl als een element binnen de kaart focus heeft. Dus als iemand tabt naar de “Bekijk product”-link in de popup, blijft de popup zichtbaar.
Maar: als de popup niet-interactieve content bevat (alleen tekst), moet je het element zelf focusbaar maken:
<div class="kaart" tabindex="0">
<img src="product.jpg" alt="Rode sneakers">
<div class="details">
<p>Maat 36-45. Vanaf 89 euro.</p>
</div>
</div>
Test elke interactie op je website: als het werkt met hover, moet het ook werken met focus.
