Verborgen tekst

Om tekst op een webpagina te verbergen, zijn er de CSS-eigenschappen 'display: none' en 'visibility: hidden'. In dit artikel willen we twee kanttekeningen maken bij het gebruik van deze CSS-technieken.

Bedenk dat sommige bezoekers verborgen tekst toch te zien krijgen, ook als dat niet de bedoeling is.
'Display: none' en 'visibility: hidden' zijn onbetrouwbaar om tekst te verbergen die enkel bedoeld is voor screenreadergebruikers (zoals skip links, extra hoofdingen en andere verborgen informatie om de structuur van een pagina inzichtelijker te maken). Verderop in het artikel vertellen we hoe het wel moet.

Niet echt onzichtbaar

Tekst die je verbergt met 'display: none' of 'visibility: hidden' is onzichtbaar op het scherm. Bij 'display: none' lijkt het alsof de tekst er nooit geweest is en als je 'visibility: hidden' gebruikt, neemt de tekst wel de voorbehouden ruimte in beslag, maar is er niets te zien.

In geen van deze gevallen verdwijnt de tekst echter uit de HTML-bron of het Document Object Model. De tekst komt immers weer tevoorschijn bij het uitschakelen van CSS, in browsers die geen of weinig ondersteuning hebben voor CSS (smartphones, PDA's en tekstbrowsers) en in een aantal screenreaders die CSS negeren. En als je pech hebt, duikt je verborgen tekst ook op in de resultaatpagina's van zzekmachines.

Tekst waarvan je echt niet wilt dat je bezoekers ze te zien krijgen, haal je dus best weg uit de broncode. Je kunt ook HTML-commentaartags gebruiken zodat ze enkel zichtbaar zijn als de broncode van een pagina wordt opgevraagd. Blinden die een screenreader gebruiken, krijgen commentaartags uiteraard ook niet voorgelezen.

Niet zichtbaar, wel hoorbaar

In een aantal gevallen wil je tekst toevoegen die niet zichtbaar hoeft te zijn op het scherm, maar het voor blinden eenvoudiger maakt om te navigeren of om de structuur van een webpagina te begrijpen. Ook hiervoor zijn 'display: none' en 'visibility: hidden' niet goed geschikt. Steeds meer screenreaders (zoals Jaws en Supernova) zijn zich namelijk bewust van de mogelijkheden van CSS en negeren ook verborgen tekst. Ze redeneren dat tekst die niet zichtbaar mag zijn op het scherm ook niet voorgelezen hoeft te worden of op de brailleleesregel moet verschijnen.

Eigenlijk zou dit helemaal geen issue zijn als screenreaders eindelijk het gebruik van CSS media types zouden ondersteunen en dus enkel stijlbladen zouden hanteren die gemarkeerd zijn met het media type 'braille' of 'aural'. Zover is het helaas nog niet en daarom moeten we een 'hack' gebruiken om tekst visueel te verbergen, maar die een screenreader niet associeert met het verbergen van tekst.

.hidden {
  position: absolute;
  left: 0;
  top: -10000px;
  overflow: hidden;
}

Met deze CSS-klasse kan je ieder HTML-element buiten het visuele bereik van de webpagina positioneren en voorkomen dat het een fysieke plaats op het scherm inneemt. Onzichtbaar dus, maar eigenlijk ook weer niet. Deze combinatie van CSS-eigenschappen is door WebAIM getest en goed bevonden. Screenreaders (en ook de meeste zoekmachines) trappen erin.

En in de praktijk?

Niet alleen blinden hebben moeite met surfen. We pleiten er dan ook voor om niet al te screenreaderspecifiek te ontwerpen. Een link om de navigatie over te slaan (een 'skip link') is bijvoorbeeld ook nuttig voor slechtzienden die hele grote letters nodig hebben, voor wie een klein beeldscherm gebruikt of de computer bedient met spraakbesturing.

Enkele voorbeelden waarbij het invoegen van extra HTML-code voor screenreaders wel interessant kan zijn:

Betekenisloze links als 'Lees verder' uitbreiden met een informatief gedeelte. Een mooi voorbeeld vind je op de website van Sint-Niklaas. Ga in de broncode maar eens op zoek naar de 'Lees Verder'-links.
Extra verborgen label-tags toevoegen aan opgesplitste formuliervelden zoals rekeningnummers, het rijksregisternummer of telefoonnummers. De toegankelijkheidsrichtlijnen stellen immers dat elk formulierlement een eigen label-tag moet krijgen. Een voorbeeld vind je op de website van Dexia Direct Net.

Opgelet met extra CSS-definities voor Print-stylesheets!

We zeiden al dat de ondersteuning voor media types nog steeds heel gebrekkig is in moderne screenreaders. Ze pikken bijvoorbeeld ook de CSS-definities op uit de stylesheets die het media type 'Print' kregen. Als je bijvoorbeeld de navigatieblokken en het zoekveld verbergt in je Print-stylesheet (een prima idee vanuit usability-oogpunt) en hiervoor 'display: none' gebruikt, is het best mogelijk dat blinde bezoekers ook geen navigatie of zoekveld meer opmerken.

Dit los je eenvoudig op door je CSS-selectors voor de printversie steeds in een afzonderlijk CSS-bestand te stoppen (en dus niet onderaan toe te voegen in je andere stylesheets of rechtstreeks in de head-sectie van je webpagina's op te nemen).