spring naar de tekst

verbergen deel 1

Het verbergen van onderdelen van een website is eigenlijk heel gewoon en er zijn een aantal verschillende technieken hoe je onderdelen van een website kunt verbergen voor de gebruiker. Misschien lijkt het wat raar dat daar verschillende technieken voor zijn, waarom is 1 niet genoeg? Er zijn verschillende situaties waarin je elementen zou willen verbergen, daar kun je dan de juiste techniek bij kiezen. Ik ben met name geïnteresseerd in de effecten die de technieken hebben op de toegankelijkheid. We kunnen bepalen welke onderdelen we voor wie 'zichtbaar' willen maken.

Waarom willen we onderdelen verbergen?

  1. Compleet verborgen.
  2. Dit zijn onderdelen van een website die verborgen zijn totdat er iets verandert. Een goed voorbeeld hiervan is de pop-up. Dat is een venster wat over de website heen verschijnt als je bijvoorbeeld op een link of knop drukt. Dit moet alleen dan zichtbaar worden. De pop-up moet dus ontoegankelijk zijn totdat er een bepaalde gebeurtenis plaats vindt.
  3. alleen visueel verborgen elementen.
  4. Dit is een beetje een lastige. Vaak zijn er elementen in en website die voor bezoekers met goed zicht meteen duidelijk zijn. We willen veel zeggen met zo min mogelijk. Daardoor worden afbeeldingen en iconen veel gebruikt. Voor andere technieken kan dit soms wel eens niet genoeg zijn. Vandaar dat we dan content toevoegen die visueel verborgen zijn maar die voor andere technische hulpmiddelen wel 'zichtbaar' zijn.
  5. alleen visueel verborgen elementen.
  6. Dit is een beetje een lastige. Vaak zijn er elementen in en website die voor bezoekers met goed zicht meteen duidelijk zijn. We willen veel zeggen met zo min mogelijk. Daardoor worden afbeeldingen en iconen veel gebruikt. Voor andere technieken kan dit soms wel eens niet genoeg zijn. Vandaar dat we dan content toevoegen die visueel verborgen zijn maar die voor andere technische hulpmiddelen wel 'zichtbaar' zijn.

verbergen deel 2

Erzijn een paar technieken die we kunnen gebruiken om content te verbergen. Twee met CSS en eentje met HTML.

  1. Met CSS en display: none
  2. We gebruiken deze CSS regel om content compleet te verbergen voor ALLE bezoekers.
  3. Met HTML en het hidden attribuut
  4. Ook met deze regel kunnen we bepaalde content verbergen voor ALLE bezoekers. De werking is hetzelfde als de CSS bij punt 1. Mocht nu echter het CSS bestand niet laden dan is de content met dit attribuut nog steeds verborgen. Pas je zowel punt 1 en punt 2 toe dan zullen zelfs oude browsers die 1 van de 2 niet ondersteunen de content verbergen.
  5. Met CSS en visibility: hidden
  6. De content is verborgen net als dat je display: none zou gebruiken maar er zijn 2 verschillen. Op ze manier is de content wel verborgen maar de content wordt niet uit de DOM verwijderd. Dus de plek die (laten we bijvoorbeeld zeggen een afbeelding) deze content in neemt blijft bestaan. Het tweede punt is dat je op dit element nog steeds andere CSS kunt toepassen. Dit is dus handig als je gebruikt maakt van CSS animaties.

Content visueel verbergen

Content is verborgen voor mensen die kunnen zien maar wel zichtbaar voor mensen die andere technische hulpmiddelen gebruiken.

Voorbeeld CSS voor visueel verborgen content.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

In dit CSS voorbeeld wordt het element verkleind tot 1 pixel, overlopende content wordt verborgen en met position: absolute wordt het element uit de normale flow van het document gehaald. Het :not gedeelte is bedoeld om elementen die focus kunnen hebben zichtbaar te maken (geldt voor link en buttons bijvoorbeeld die focus krijgen met bijvoorbeeld de TAB-toets). Dus elementen die normaal geen focus hebben zoals paragrafen worden niet zichtbaar en interactieve elementen wel.

Content visueel verbergen: buiten beeld

Het element is nog steeds aanwezig maar staat nu buiten het zichtbare deel van de browser.

Voorbeeld CSS voor visueel verborgen content.off-screen {
   left: -100vw;
   position: absolute;
 }

Voor technische hulpmiddelen is deze content wel toegankelijk. Voor talen die van links naar rechts lezen is links buiten beeld zetten het beste anders bestaat er de kans dat je een horizontale scrollbar krijgt. Voor talen die van rechts naar links lezen geldt het tegenovergestelde. Deze techniek kun je gebruiken als je bijvoorbeeld meerdere skiplinks hebt die in beeld worden geanimeerd als ze focus krijgen.

Content verbergen voor technische hulpmiddelen

Soms kan het goed zijn om bepaalde elementen die visueel iets toevoegen aan een website (bijvoorbeeld icon-fonts) te verbergen voor technische hulpmiddelen. Icon-fonts kunnen nogal raar geïnterpreteerd worden door tecnhnische hulpmiddelen. Het is goed om er altijd een tekst-alternatief aan te koppelen of visueel verborgen en toegankelijke tekst om de doel van het icoon te beschrijven.Door aria-hidden="true" toe te voegen kun je elementen verbergen voor screenreaders.

Voorbeeld van de HTML<button type="button">
  <!-- een X icoon -->
  <span class="icon-close" aria-hidden="true"></span>
  <span class="sr-only">Element sluiten"</span>
</button> 

Deze button heeft een X als icoon om aan te geven dat de button bedoeld is om iets te sluiten. In dit voorbeeld wordt het icoon verborgen voor screenreaders en is er een visueel verborgen tekst om uit te leggen wat het doel is van de button.

Gepubliceerd op 24 juni 2020 door Renee de Kruijf