Lege link

“Link.”

Dat is alles. Een schermlezer meldt een link. Maar niet waarheen. Niet waarom. Niet wat.

De link heeft geen tekst. Geen alt-tekst. Geen aria-label. Alleen een CSS-achtergrondafbeelding die het logo toont.

<!-- Niet doen: lege link met alleen een CSS-achtergrond -->
<a href="/home" class="logo-link"></a>

<!-- Wel doen: visueel verborgen tekst -->
<a href="/home" class="logo-link">
  <span class="sr-only">Naar de homepagina</span>
</a>

Waar komt dit voor?

• Logo’s die linken naar de homepage
• Social media iconen die via CSS-achtergronden worden getoond
• Hamburger-icoontjes gemaakt met CSS ::before en ::after
• Decoratieve elementen die stiekem links zijn

De sr-only class (soms ook visually-hidden genoemd) verbergt tekst visueel maar houdt deze beschikbaar voor schermlezers:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Niet display: none — dat verbergt het ook voor schermlezers.