Verborgen tekst

Er zijn verschillende technieken om tekst/onderdelen van een website (tijdelijk) te verbergen. Kies de juiste techniek afhankelijk voor wie de onderdelen bedoeld zijn.

Onzichtbaar voor iedereen

Webpagina's bevatten heel wat onderdelen die pas zichtbaar worden na een actie van de gebruiker. Voorbeelden:

  • De niet-actieve slides van een slideshow en de tabs van een tabpaneel.
  • 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.

Display:none

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 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 u het onderdeel op een bepaald moment zichtbaar wilt maken. Is dat niet het geval, verwijder het dan uit de broncode of plaats het in comment tags.

HTML5 hidden-attribuut

In principe bereikt u hetzelfde resultaat met het HTML5 hidden attribuut. Omdat dit niet werkt in browsers als IE9 raden we toch aan om het te blijven combineren met display: none.

<p hidden class="hidden">Deze paragraaf is verborgen.</p>
.hidden { display: none }

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/inhoud van een webpagina te begrijpen. Voorbeelden:

Gebruik onderstaande technieken niet om onderdelen te verbergen die links, knoppen of formuliervelden bevatten want die 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 aanwezig in de webpagina en krijgen dus 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

In uitzonderlijke gevallen willen we onderdelen die zichtbaar zijn op het scherm verbergen voor screenreadergebruikers. Bijvoorbeeld voor 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.

Merk op dat louter visuele onderdelen best achtergrondafbeeldingen zijn en in dat geval zijn ze sowieso onzichtbaar voor screenreaders.

Aria-hidden

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.