Dit betekent dat alle informatie of visuele elementen die direct verschijnen of veranderen - bij mouse-over, toetsenbordfocus of klikken - toegankelijk en begrijpelijk moeten zijn voor iedereen.
Dit omvat tooltips, vervolgkeuzemenu's, helpberichten die tijdens een interactie verschijnen of andere inhoud die contextueel wordt weergegeven.
Hoewel deze extra inhoud vaak is ontworpen om discreet te zijn en een overdaad aan informatie te voorkomen, wordt het paradoxaal genoeg een echt obstakel.
Hun grootste kwetsbaarheid ligt in hun exclusieve afhankelijkheid van de muis: ze worden ontoegankelijk voor het toetsenbord (worden niet geactiveerd door focus) en dus onzichtbaar voor mensen die zonder muis browsen.
Hun kortstondige aard vormt ook een uitdaging, omdat ze soms te vluchtig zijn voor mensen met concentratieproblemen.
Kortom, slecht beheerde effecten of een gebrek aan aankondiging door ondersteunende technologieën kunnen echt ongemak veroorzaken, wat leidt tot verlies van cruciale informatie en een frustrerende gebruikerservaring.
Om je dynamische inhoud te beheren, moet je er eerst voor zorgen dat deze niet alleen wordt geactiveerd wanneer je er met de muis overheen gaat (:hover), maar ook wanneer je erop focust (:focus), zodat deze toegankelijk is vanaf het toetsenbord.
De extra inhoud moet zichtbaar en persistent blijven totdat de gebruiker deze expliciet weigert en het moet mogelijk zijn om de aanwijzer of focus over deze inhoud te bewegen om deze te verkennen. Zorg voor een duidelijk mechanisme om inhoud te weigeren zonder de aanwijzer te hoeven verplaatsen (bijvoorbeeld een knop 'Sluiten' of de Escape-toets).
Voor dynamisch toegevoegde of bijgewerkte inhoud, kondig wijzigingen aan schermlezers aan met behulp van aria-live zones of geschikte rollen (role='alert' voor dringende berichten, bijvoorbeeld).
Gebruik ten slotte semantische markup en ARIA-attributen die zijn aangepast aan de aard van je inhoud: denk voor een tooltip aan het associëren van een knop of trigger-element met aria-describedby; gebruik voor een dropdown-menu de menu-rollen aria-expanded en aria-controls om de gebruiker te informeren over de status en het beheer ervan, enzovoort.
N°1.
N°2.
N°3.
N°4.
