Skjult visuelt indtil fokus

Skip links er afgørende, men mange teams er bekymrede for, at de roder layoutet til. Det klassiske svar er: skjul det visuelt, men hold det klar til tastaturbrugere.

Brug ikke display none eller visibility hidden. De fjerner linket fra tilgængelighedstræet, så ingen kan sætte fokus på det.

Målet er en visuelt skjult tilstand: usynlig på skærmen, men fuldt til stede for tastaturer og skærmlæsere.

Et almindeligt trick formindsker linket til én pixel og klipper det. Det bliver i DOM'en og fokusrækkefølgen, men er ude af syne.

Det magiske er fokus-tilstanden. Når Tab lander på linket, gendanner din CSS dets størrelse og trækker det tilbage i synsfeltet.

Brug fokus, aldrig hover. En tastaturbruger kan ikke holde musen over noget, så en visning, der kun aktiveres ved hover, efterlader linket permanent usynligt for dem.

Når det vises, skal det have en solid baggrund og indvendig margen. Det skal ligne en tydelig knap, ikke svag tekst, som brugeren kan overse.

Fjern ikke fokusomridset på det viste link. Brugerne skal kunne se præcis, hvor deres fokus er landet.

Det skjulte link placeres ofte uden for skærmen med en negativ top og glider derefter til top nul ved fokus. Bevægelsen får visningen til at føles bevidst.

Dette visuelt skjulte mønster er så nyttigt, at de fleste teams har det som en delt utility class til alt sr-only-indhold.

Tryk på Tab efter en ny indlæsning. Skip linket bør straks komme frem. Tab væk fra det, så bør det forsvinde igen. ✅

Skjul skip linket med klipning, aldrig display none, og vis det ved fokus med et tydeligt omrids. Usynligt, indtil der er brug for det. 🎯