Zichtbaarheid

Recap display

Je kent display al uit het box model: block, inline en inline-block bepalen hoe een element zich in de flow gedraagt.

Deze week komen er twee waarden bij:

Waarde	Wat het doet
flex	maakt het element een flex container
inline-flex	maakt het element een inline flex container
none	haalt het element volledig uit de pagina

none, hidden en visibility

Drie manieren om iets weg te halen, met drie verschillende gevolgen.

.a { display: none; }
.b { visibility: hidden; }

<p hidden>Deze paragraaf staat er niet.</p>

• display: none haalt het element uit de flow. De ruimte verdwijnt.
• visibility: hidden laat de ruimte staan en maakt de inhoud onzichtbaar.
• Het hidden attribuut doet in de praktijk hetzelfde als display: none, maar staat in je HTML.

Alle drie zijn ze ook weg voor een screen reader én voor zoekrobots of genAI.

💡 Waar je ze gebruikt

display: none zet je op dingen die er voor niemand hoeven te zijn, zoals een menu dat nog opengeklapt moet worden. visibility: hidden is soms handig voor animaties en transities. Het hidden attribuut hoort bij inhoud die er op dat moment niet is.

Een .visually-hidden class gebruik je om elementen te verbergen voor het oog 👁️, maar niet voor hulpsoftware, zoekrobots, genAI... Het staat er wel, maar je ziet het niet.

.visually-hidden

Een titel die er wel is, maar niet te zien

Je headings dragen de structuur van je document. Screen readers, zoekrobots en de outline van je pagina leunen erop.

Visueel heb je ze niet altijd nodig. Een nav met vijf links is voor wie kijkt duidelijk genoeg zonder de titel "Navigatie" erboven. Voor wie luistert niet.

Zet je daar display: none of visibility: hidden op, dan is de titel ook weg voor de software die hem nodig heeft. Compleet nutteloos dus.

Daarvoor bestaat een class die je overal tegenkomt:

.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

Het element blijft in de pagina staan, krimpt tot één pixel en wordt weggeknipt. Een screen reader leest het gewoon voor.

Staat al in je cheat sheet

Je moet die niet van buiten kennen, je vindt deze class in de HTML cheat sheet.
Kopieer ze, typ ze niet over.

Niet misbruiken

Deze class is voor tekst die de structuur draagt. Verberg er geen inhoud mee die je bezoeker eigenlijk zou moeten zien.

Portfolio

In je portfolio heeft elke nav wellicht nog een h2 'hoofdnavigatie' erboven staan. Dat is interessant van zodra je twéé navigaties hebt op één pagina. Bv. de hoofdnavigatie en een inhoudstabel.

Voeg op al die h2's de class visuall-hidden toe, en voeg de CSS rule toe aan je stylesheet.

💡 Webstorm tip

ctrl shift r = zoeken en vervangen over heel je project.