De inhoud op de juiste manier verbergen
Niet alle methoden om inhoud te verbergen zijn geschikt voor gebruikers van schermlezers of andere ondersteunende technologieën. Op deze pagina worden de belangrijkste methoden beschreven om inhoud te verbergen voor alle gebruikers en specifiek voor schermlezergebruikers.
Inhoud onzichtbaar maken (visueel verbergen)
Als een element op de pagina:
- een interactief element is, maar onzichtbaar moet zijn zodat het thematisch kan worden gestyled (zoals een link, checkbox, radioknop of formulierbesturingselement met aangepaste stijlen),
- een titel of label is voor iets waarvan het doel al duidelijk is (en dus niet hoeft te worden weergegeven aan ziende gebruikers; bijvoorbeeld een sectielabel of formulierlabel),
- niet zichtbaar hoeft te zijn voor ziende gebruikers, maar wél zichtbaar moet blijven voor schermlezers,
... dan moet je het onzichtbaar maken (visueel verbergen).
Je kunt dit doen door:
het element de klasse visually-hidden te geven,
in Drupal 8 de veldinstellingen op de weergavebeheerpagina van entiteits-subtypen aan te passen (bijv. het veld "Tags" in het inhoudstype Artikel) en het veldlabel op "- Visually Hidden -" te zetten,
CSS te gebruiken om het element buiten het zichtbare gedeelte van de pagina te positioneren, of
CSS toe te passen als volgt:
position: absolute !important; clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; word-wrap: normal;
Voorbeeld:
Het verbergen van de titel van fout-, waarschuwing- en statusmeldingen.
Reden:
In de meeste thema’s worden statusberichten opvallend weergegeven in een gekleurde kader om de aandacht van ziende gebruikers te trekken. Volgens WCAG 2.0 sectie 1.3.3 mag begrip en gebruik van inhoud niet uitsluitend afhangen van visuele kenmerken zoals vorm, grootte of positie.
Zonder een kop die aanduidt wat het bericht is, kunnen schermlezergebruikers in verwarring raken.
De meeste schermlezers kunnen door een pagina navigeren via koppen. Een kop toevoegen aan meldingen maakt ze gemakkelijker te vinden.
Inhoud onzichtbaar maken totdat iemand er met het toetsenbord naartoe navigeert
Als een element op de pagina:
- een link is om gebruikers te helpen direct naar de hoofdinhoud of navigatie te springen,
- een alternatief biedt voor elementen die alleen met de muis te gebruiken zijn, of
- niet zichtbaar hoeft te zijn voor ziende gebruikers, tenzij ze met het toetsenbord navigeren,
... dan moet je het verbergen totdat iemand er met het toetsenbord naartoe gaat.
Je kunt dit doen door:
- het element zowel de klassen visually-hidden als focusable te geven, of
- de volgende CSS te gebruiken:
css_selector_for_my_element {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px;
word-wrap: normal;
}
css_selector_for_my_element:active,
css_selector_for_my_element:focus {
position: static !important;
clip: auto;
overflow: visible;
height: auto;
width: auto;
}
Waarbij css_selector_for_my_element de selector is van het element dat je wilt verbergen totdat iemand er met het toetsenbord op focust.
Voorbeeld:
De link “Ga naar hoofdinhoud” bovenaan elke pagina in de standaardthema’s.
Reden:
Gebruikers die alleen het toetsenbord of schermlezers gebruiken, willen snel naar de hoofdinhoud van de pagina kunnen springen.
Om te voldoen aan WCAG 2.0 sectie 2.4.1 moet je een manier bieden om herhalende blokken inhoud over te slaan die op meerdere pagina’s voorkomen.
Inhoud volledig verbergen voor alle gebruikers
Als een element op de pagina:
- niet getoond moet worden totdat een JavaScript-event het zichtbaar maakt,
- niet relevant is voor ziende gebruikers of schermlezers in de huidige context,
- gegevens bevat die door JavaScript worden gelezen of geschreven, maar niet direct zichtbaar hoeven te zijn, of
- in het algemeen niet zichtbaar hoeft te zijn voor eender welke gebruiker,
... dan moet je het volledig verbergen voor alle gebruikers.
Je kunt dit doen door:
- het element de klasse hidden te geven (in Drupal 8),
- het veldformaat op “- Hidden -” te zetten op de weergavebeheerpagina van het entiteitssubtype,
- het veldlabel op “- Hidden -” te zetten in de weergavebeheerpagina, of
- CSS te gebruiken met display: none;.
Voorbeeld:
Het verbergen van het kleurvoorbeeldgebied in de Color-module totdat JavaScript wordt geladen:
/* color.css (Drupal 7 en 8) */
#preview {
display: none;
}
Reden:
De voorbeeldfunctie werkt niet zonder JavaScript, dus hoeft ze niet weergegeven te worden.
Onjuist gebruik
Een veelgemaakte fout met “display:none” is het verwijderen van formulierlabels of koppen om het uiterlijk te wijzigen. Dit maakt het formulier echter ontoegankelijk voor schermlezergebruikers!
Bijvoorbeeld: als je een formulierlabel met “display:none” verwijdert, zal een schermlezergebruiker horen: “Er is een verplicht tekstveld, maar ik weet niet waarvoor.” In dit geval is het beter om de inhoud visueel te verbergen in plaats van volledig te verwijderen.
Inhoud onzichtbaar maken voor schermlezers
Als een element op de pagina:
- verwarrend is wanneer het alleenstaand wordt gelezen, of
- alleen zichtbaar moet zijn voor ziende gebruikers,
... dan moet je het onzichtbaar maken voor schermlezers.
Je kunt dit doen door:
- het element het attribuut aria-hidden="true" te geven
Voorbeeld:
Een besturingselement om een zoekfilter te verwijderen toont een “x” voor ziende gebruikers én een visueel verborgen tekstinstructie voor schermlezers:
Currently filtering by: <a href="...">Module <span class="visually-hidden">Klik om dit filter te verwijderen.</span> <span aria-hidden="true">x</span></a>
Reden:
Er is al een toegankelijke alternatieve tekst aanwezig.
Alleen het horen van “x”, zelfs na de alternatieve tekst, kan verwarrend zijn voor schermlezergebruikers.
Onjuist gebruik
Als je inhoud verbergt voor schermlezers, kunnen gebruikers van deze technologie de informatie niet meer waarnemen of gebruiken. Volgens WCAG 2.0 sectie 1.1 moet je altijd een toegankelijke alternatieve inhoud aanbieden, anders blijft de informatie ontoegankelijk.