Besökare på din webbplats som använder skärmläsare och handdatorer (utan stöd för CSS) läser av och visar ett dokument linjärt i den ordningen som elementen finns i HTML-koden. Med CSS har du möjlighet att manipulera detta genom att till exempel positionera element bredvid varandra, men om besökaren inte använder CSS kan det på en liten skärm ta lång tid att ta sig till huvudinnehållet.
För att förbättra tillgängligheten för dessa besökare finns det ett enkelt sätt att skapa länkar högst upp i ditt HTML-dokument som länkar internt till det element som innehåller huvudinnehållet (förslagsvis #content) eller elementet som innehåller webbplatsens meny (förslagsvis #navigation). Normalt kallas detta Skip to Content-länkar. Besökaren behöver då bara klicka på en av länkarna för att förflytta sig automatiskt till innehållet.
Implementation
Placera följande HTML-element högst upp i ditt dokument, efter <body>-taggen.
[sourcecode language='html']
[/sourcecode]
Använd sedan följande CSS-klass i din stilmall för att dölja navigationslänkarna för besökare med stöd för CSS.
[sourcecode language='css']
#accessibility {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}
[/sourcecode]
Självklart finns möjligheten att lämna länkarna synliga för att underlätta för beskare som till exempel navigerar med tangentbordet. För exempel på detta förfarande kan du besöka 456 Berea Street och titta efter länken med texten ”Skip to main content”. Ett annat alternativ är att göra länkarna synliga när en besökare tabbar igenom dokumentet med hjälp av pseudo-klassen focus.
