Dold tills fokus placeras där

Hoppa över-länkar är viktiga, men många team oroar sig för att de rör till layouten. Det klassiska svaret är att dölja länken visuellt men hålla den redo för tangentbordsanvändare.

Använd inte display none eller visibility hidden. De tar bort länken från hjälpmedelsträdet, så ingen kan fokusera på den.

Målet är ett visuellt dolt tillstånd: osynligt på skärmen men helt tillgängligt för tangentbord och skärmläsare.

Ett vanligt knep är att krympa länken till en pixel och klippa den. Den finns kvar i DOM:en och fokusordningen, men är utom synhåll.

Det magiska är tillståndet focus. När Tab landar på länken återställer CSS dess storlek och drar tillbaka den in i synfältet.

Använd focus, aldrig hover. En tangentbordsanvändare kan inte hovra, så en visning som bara sker vid hover lämnar länken permanent osynlig för personen.

När den visas ska den ha en tydlig bakgrund och utfyllnad. Den ska se ut som en uppenbar knapp, inte som blek text som användaren kan missa.

Ta inte bort fokusmarkeringen på den visade länken. Användare behöver se exakt var fokus har hamnat.

Den dolda länken placeras ofta utanför skärmen med ett negativt top-värde och flyttas sedan till top noll vid fokus. Förflyttningen gör att visningen känns avsiktlig.

Det här mönstret för visuellt dolt innehåll är så användbart att de flesta team sparar det som en gemensam hjälputklass för allt sr-only-innehåll.

Tryck på Tab efter en ny inläsning. Hoppa över-länken ska visas direkt. Tabba vidare så ska den försvinna igen. ✅

Dölj hoppa över-länken genom klippning, aldrig med display none, och visa den vid fokus med en tydlig fokusmarkering. Osynlig tills den behövs. 🎯