Een element verbergen in de DOM
In een single page web app heb je soms te maken met het verbergen/tonen van verschillende soorten elementen. Hieronder is een GIF te zien van een single page web app die ik gemaakt heb waarbij elementen worden verborgen en getoond (GitHub project)
Maar wat is nou de correcte manier om elementen te verbergen/tonen? Moet het element via javascript uit de DOM gehaald worden of is een CSS styling toevoegen de betere optie? In dit artikel ga ik dit onderzoeken.
Als je een bepaald element wil verbergen maar later weer wilt tonen, kan er het beste een CSS styling worden toegevoegd aan het element die er voor zorgt dat het element niet meer zichtbaar is. Als een element niet meer gebruikt hoeft te worden, heb je de mogelijkheid om het via Javascript te verwijderen uit de DOM. Het verwijderen zou dan gedaan worden met de volgende code (stackoverflow.com/a/8830882):
function removeElement(element) {
// check if element is actually an element and check if it has a parent
if (element && element.nodeType && element.parentNode) {
element.parentNode.removeChild(element);
}
}Het is aan te raden de laatste methode alleen te gebruiken als het element veel geheugen in beslag neemt. In de meeste scenario’s is deze methode niet nodig en maakt het geen aanzienlijk prestatie verschil. Daarnaast is deze methode afhankelijk van JavaScript (Bron). Voor het verbergen van het element zijn de volgende methodes mogelijk (Bron):
- visibility: hidden;
- display: none;
- height: 0; width: 0; overflow: hidden;
- text-indent: -999em;
- position: absolute; left: -999em;
Het is belangrijk dat er rekening wordt gehouden met het effect van het toepassen van de CSS styling en of het nog gelezen kan worden door screenreaders. Soms is het nodig dat de screenreader nog de inhoud moet kunnen lezen van het element.
Met de onderstaande methodes wordt de inhoud van het element genegeerd en dus niet voorgelezen door de screenreaders.
Bij visibility: hidden; wordt het element verborgen, maar neemt het nog wel de ruimte in beslag die het voorheen had. Deze methode is daarom in de meeste gevallen niet aan te raden omdat op de interface nog een spoor van het element zichtbaar is.
Bij display: none; wordt het element verborgen en neemt het geen ruimte in beslag. Als je wilt dat er geen spoor te vinden is van het element op de interface, dan is dit de beste en “schoonste” manier om dit te bereiken.
Ook is er height: 0; width: 0; overflow: hidden;. Dit klapt het element in en neemt ook geen ruimte in beslag. Het is een iets omslachtigere manier van het element verbergen, maar het werkt wel.
Met de volgende methodes wordt de inhoud van een element wel herkent door de screenreaders.
Met text-indent: -999em; wordt het element uit het zicht gehaald, maar kunnen hyperlinks op een vreemde manier worden gefocust en is daarom niet 100% betrouwbaar. Daarnaast worden alleen tekst en inline elementen herkent.
Door gebruik te maken van: position: absolute; left: -999em;, wordt het element verborgen en naar de linkerkant van het scherm geschoven. Op deze manier wordt is het element verborgen en kan de screenreader nog wel de inhoud lezen. Deze methode gaat uit dat tekst van links naar rechts wordt gelezen, als tekst gelezen wordt van rechts naar links (bijvoorbeeld in de Arabische taal) wordt de CSS: position: absolute; right: -999em;.
Hieronder zijn alle methodes nog even op een rijtje gezet met de verschillende effecten en hoe de screenreader zich gedraagt.
| CSS | Effect | Gedrag van Screenreader |
|---|---|---|
| visibility: hidden; | Element is verborgen, maar neemt nog wel ruimte in beslag | Element wordt genegeerd |
| display: none; | Element is verborgen en neemt geen ruimte in beslag | Element wordt genegeerd |
| height: 0; width: 0; overflow: hidden; | Element is ingeklapt en de inhoud is verborgen | Element wordt genegeerd |
| text-indent: -999em; | Element is uit het zicht gehaald, maar hyperlinks worden op een vreemde manier gefocust en is niet 100% betrouwbaar | Tekst en inline elementen van het element worden niet genegeerd |
| position: absolute; left: -999em; | Element is ingeklapt en wordt naar de linkerkant geschoven. | Element wordt niet genegeerd |
Als je het element wil verbergen voor de gebruiker en de screenreader, kan er het beste gebruik worden gemaakt van: display: none. Als je het element wil verbergen maar nog wel wilt laten voorlezen door een screenreader, moet er gebruik worden gemaakt van: position: absolute; left: -999em.
https://alistapart.com/article/now-you-see-me/
https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/
https://stackoverflow.com/questions/14058013/hide-vs-remove-dom-elements
https://stackoverflow.com/questions/8830839/javascript-dom-remove-element