Succescriterium 1.4.13 Content bij hover of focus
Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:
- Sluiten: Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt;
- Aanwijsbaar: Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt;
- Aanhouden: De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is.
Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en is niet aangepast door de auteur.
Noot 1Voorbeelden van aanvullende content die door de user agent wordt bepaald, zijn de browser tooltips die worden gemaakt met behulp van het HTML title-attribuut.
Noot 2Aangepaste tooltips, submenu’s en andere niet-modale pop-ups die worden weergegeven bij hover en focus zijn voorbeelden van aanvullende content waarop dit criterium van toepassing is.
Noot 3Dit criterium is van toepassing op content die aanvullend verschijnt met de activerende component zelf. Aangezien verborgen componenten die zichtbaar worden bij toetsenbordfocus (zoals links die worden gebruikt om naar een ander deel van een pagina te springen) geen aanvullende content presenteren, vallen ze niet onder dit criterium.
Content bij hover of focus begrijpen (Engelstalig)
Soms verschijnt er extra content als je met de muis over een element beweegt, of als het element de toetsenbordfocus krijgt. Bijvoorbeeld een tooltip of een subnavigatie. Dit heet aanvullende content. Die content moet aan drie voorwaarden voldoen:
- Sluiten: Je kunt de content sluiten zonder de aanwijzer of de focus te verplaatsen.
- Aanwijsbaar: Verschijnt de content bij hover, dan kun je de aanwijzer over de content bewegen zonder dat die verdwijnt.
- Aanhouden: De content blijft zichtbaar tot je de aanwijzer of focus weghaalt, de content sluit, of de informatie niet meer geldt.
De eis over sluiten geldt niet als de content:
- een invoerfout meldt
- geen andere content bedekt of vervangt, ook niet het element zelf. Bijvoorbeeld een tooltip die alleen over witruimte valt
Content waarvan de browser de weergave bepaalt, valt niet onder deze eis. Bijvoorbeeld de tooltip van het title-attribuut.
Hoe pas je dit toe?
- Laat aanvullende content sluiten met de Escape-toets. De aanwijzer en de focus blijven dan staan waar ze zijn.
- Plaats de content direct tegen het element aan, zonder tussenruimte. Zo kan de aanwijzer erheen bewegen zonder dat de content verdwijnt.
- Laat de content niet na een tijd vanzelf verdwijnen.
Voor wie is dit belangrijk?
- Mensen die alleen het toetsenbord gebruiken.
- Mensen die een fysieke of motorische beperking hebben.
- Mensen die een visuele beperking hebben.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Uitzonderingen
Uitzonderingen zijn:
- aanvullende content waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur, zoals een tooltip via het
title-attribuut - alleen voor de eis over sluiten: aanvullende content die een invoerfout meldt
Geldt alleen voor:
- content die zichtbaar wordt bij hover of focus en weer verdwijnt als de hover of focus weg is (content die alleen opent na een klik valt er niet onder)
- content die in aanvulling op het element zelf verschijnt (verborgen elementen die zichtbaar worden bij focus, zoals een skiplink, vallen er niet onder)
Testprocedure
Test 1: Aanvullende content
- Verken de pagina met muis en toetsenbord
- Bepaal welke aanvullende content verschijnt bij hover of focus:
- Tooltips
- Subnavigaties
- Bepaal voor elke aanvullende content:
- Bij welke actie die verschijnt: hover, focus of allebei
- Of die andere content bedekt of vervangt
- Bepaal welke aanvullende content verschijnt bij hover of focus:
- Herlaad de pagina
- Test elke aanvullende content die andere content bedekt of vervangt en controleer:
- Of de content te sluiten is zonder de aanwijzer of focus te verplaatsen (bijvoorbeeld met Escape)
- Test elke aanvullende content die bij hover verschijnt en controleer:
- Of de content zichtbaar blijft als de aanwijzer van het element direct naar de content beweegt
- Of de content zichtbaar blijft als de aanwijzer over de hele content beweegt, tot aan de randen
- Wacht 30 seconden bij elke aanvullende content zonder de aanwijzer of focus te verplaatsen en controleer of minstens één van de volgende waar is:
- Of de content zichtbaar blijft
- Of de content verdwijnt omdat de informatie niet langer geldig is (bijvoorbeeld een melding “Bezig met laden” als het laden klaar is)
Belangrijk om te weten
- Aanvullende content die bij hover en bij focus verschijnt, wordt in beide situaties getest.
- De 30 seconden is niet direct een eis uit WCAG. Het geeft gebruikers genoeg tijd om de content te lezen of de vergroting aan te passen.
Beoordeling
- Voor aanvullende content die bij hover of focus verschijnt, moet minstens één van de volgende zaken gelden:
- De content bedekt of vervangt geen andere content
- De content is te sluiten zonder de aanwijzer of focus te verplaatsen
- Aanvullende content die bij hover verschijnt, moet zichtbaar blijven als de aanwijzer van het element naar de content beweegt en over de hele content beweegt
- Aanvullende content die bij hover of focus verschijnt, moet zichtbaar blijven totdat minstens één van de volgende zaken gebeurt:
- De gebruiker sluit de content
- De aanwijzer of focus verlaat het element en de content
- De informatie is niet langer geldig