Barrierefreiheit

[Gunnar Bittersmann]

@@Markus der 2.

Würde in beiden Fällen (invisible und sprunglink) nicht genügen "display: none;"?

Nein. display: none entfernt die Elemente nicht nur visuell, sondern auch aus dem accessibility tree; d.h. ein Screenreader liest sie nicht vor.

span.inivisble
{
    position: absolute;
    left: -1000px;
    font-size: 0px;
}

Das ist grober Unfug: „a performance hit caused by the need to draw a giant 9999px box offscreen. (Yes, the browser really does this.)“ (Zeldman)

☞ Wie man etwas visuell versteckt

a.sprunglink
{
	position: relative;
	left: -99999px;
}

Dito.

Was aber keinen performance hit verursachen dürfte: Den Skip-Link nach oben aus dem Viewport schieben; und zwar nicht dreiundzwölfzigtausend Pixel, sondern soweit wie nötig: um seine Höhe – 100%. Im Beispiel mit translate.

LLAP 🖖