logo

Palette - Maak het kleurrijk🎨

Palette - Visuele Page Builder. Je hoeft geen designer te zijn.

Live demo Palette downloaden

Scroll
04/10/2025, by Ivan

Het verbergen van content is erg nuttig voor toegankelijkheid. We kunnen dingen visueel verbergen en ze alleen tonen aan schermlezergebruikers, we kunnen content verbergen voor schermlezers en alleen visueel tonen, of we kunnen content voor beiden verbergen. Drupal bevat ingebouwde CSS-klassen die helpen om je bedoelingen duidelijk te maken. We raden het gebruik van { display:none; } af, omdat dit vaak verkeerd wordt toegepast.

Techniek     Visueel verborgen     Verborgen voor schermlezer Extra informatie

CSS: 

<div class="visually-hidden"></div>

 Ja  Nee

Dit is ingebouwd in Drupal 8. In Drupal 7 was dit class="element-invisible".

CSS: 

<div class="hidden"></div>

 Ja  Ja

Dit is ingebouwd in Drupal 8. In Drupal 7 was dit class="element-invisible".

HTML5-attribuut: 

<div hidden></div>

 Ja  Ja

In ondersteunde browsers werkt dit hetzelfde als CSS { display:none; }

ARIA-attribuut: 

<div aria-hidden="true"></div>

 Nee  Ja Ingebouwd in moderne browsers. Zeer vergelijkbaar met het verborgen HTML5-attribuut

CSS: 

<div class="visually-hidden focusable"></div>

 Ja  Ja Dit is ingebouwd in Drupal 8. In Drupal 7 was dit class="element-invisible element-focusable"

 

Deze indeling is afkomstig van de pagina Hidden content van 18F.