Er zijn verschillende technieken om tekst of onderdelen van een website (tijdelijk) te verbergen. Kies de juiste techniek afhankelijk voor wie de onderdelen bedoeld zijn.
- Onzichtbaar voor iedereen:
display:none - Verborgen tekst, enkel voor screenreaders:
clip - Visuele elementen verbergen voor screenreaders:
aria-hidden="true"
Onzichtbaar voor iedereen
De broncode van een webpagina bevat heel wat onderdelen die pas zichtbaar worden na een actie van de gebruiker. Voorbeelden:
- De niet-actieve slides van een slideshow en tabpanelen van een tabs-widget.
- De antwoorden op veelgestelde vragen die nog niet zijn uitgeklapt.
- Het submenu van een uitklapmenu.
- De inhoud die in een overlay of lightbox zal verschijnen.
- De link om het menu te openen bij responsive websites. Deze link wordt enkel zichtbaar op kleine schermen.
Deze onderdelen moeten voor alle bezoekers onzichtbaar zijn. Gebruik daarvoor display: none. Visibility: hidden kan ook maar dan neemt de tekst de voorbehouden ruimte in beslag, maar is er niets te zien. Meer uitleg vind u in het artikel Hiding elements with CSS.
Via deze techniek wordt het onderdeel:
- Niet getoond in de browser.
- Niet voorgelezen door een screenreader.
- Niet opgenomen in de tabvolgorde.
Onderdelen die verborgen zijn met display: none kunnen wel:
- Gelezen worden in de broncode.
- Tevoorschijn komen als CSS niet goed wordt ondersteund of wordt uitgeschakeld.
- Voorgelezen worden door oude versies van screenreaders die alle CSS negeren.
- Geïndexeerd worden door zoekmachines.
Gebruik deze techniek dus alleen als je het onderdeel op een bepaald moment zichtbaar wilt maken. Is dat niet het geval, verwijder het dan uit de broncode of plaats het in commentaartags.
Verborgen tekst, enkel voor screenreaders
In een aantal gevallen willen we tekst toevoegen die niet zichtbaar hoeft te zijn op het scherm, maar die screenreadergebruikers wel helpt om te navigeren of om de structuur van een webpagina te begrijpen. Voorbeelden:
- Een tekstalternatief voor betekenisvolle achtergrondafbeeldingen en icon fonts.
- Een alternatief geven voor visuele informatie zoals het gewicht van een tag in een tag cloud.
Gebruik onderstaande technieken niet om onderdelen te verbergen die links, knoppen of formuliervelden bevatten. Deze zijn waarschijnlijk niet enkel bedoeld voor screenreadergebruikers, zoals bijvoorbeeld een skip link of een pauzeknop voor een slideshow. Als u ze verbergt, worden ze onzichtbaar, maar blijven ze aanwezig in de webpagina. Hierdoor krijgen ze focus bij het tabben, waardoor de toetsenbordgebruiker in het ijle tabt.
Clip
Door de CSS clip eigenschap op 0 te zetten, wordt het element onzichtbaar, maar lezen screenreaders het wel voor.
The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Buiten beeld positioneren
Een andere techniek is het buiten beeld positioneren van tekst: ook dan is het visueel onzichtbaar, maar wordt het wel gelezen door een screenreader:
.hidden {
position: absolute;
left: 0;
top: -10000px;
overflow: hidden;
}
Visuele elementen verbergen voor screenreaders: aria-hidden="true"
In uitzonderlijke gevallen willen we onderdelen die zichtbaar zijn op het scherm verbergen voor screenreadergebruikers. Een voorbeeld is een element dat louter voor vormgeving dient en daarom beter niet voorgelezen wordt. Of om te vermijden dat een screenreader overbodige of dubbele informatie voorleest.
Een element met het attribuut aria-hidden="true" wordt genegeerd door screenreaders, maar blijft zichtbaar voor alle andere bezoekers. Uit de ARIA specificatie van het W3C:
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content.
Belangrijk: als u aria-hidden="true" toevoegt aan een element, dan geldt het ook voor alle onderliggende elementen. Gebruik het dus zeer voorzichtig en test met een screenreader.
Reacties
Reageer als eerste