Skip to content

— Tager ca. 9 minutter at læse

Da jeg i sin tid opdagede dette lille skjulte element blev jeg helt glad. Både fordi det er en fed hjælpefunktion, som gør det meget nemmere at fortsætte til indholdet på siden, hvis man benytter sit keyboard til at navigere rundt på et website, men jeg kom også straks til at tænke på at det jo nærmest er tilgængelighedens svar på et easter egg [1].

Det er især inden for spilverdenen du måske har hørt om, eller måske endda ligefrem selv opdaget, et easter egg eller to. Så vidt jeg ved, var det også blandt spiludviklere begrebet oprindeligt opstod [2]. Typisk er et easter egg en gemt lille overraskelse i spillet, og kan være alt fra en skjult besked, et ekstra liv, et hemmeligt rum, en ekstra bane eller hvad de kreative spiludviklere ellers har fundet på.

Det er dog ikke kun inden for spilverdenen der gemmes easter eggs. Flere kendte programmer som eks. Word og Firefox har fra tid til anden indeholdt små sjove easter eggs.
Google er også blandt dem, som holder traditionen med easter eggs i hævd. Laver du eks. søgningen “Do a barrel rool” på Google drejer hele resultatsiden lige en omgang.
YouTube har også gennem tiden indeholdt flere forskellige easter eggs — på et tidspunkt kunne du eks. spille snake [3], hvis du trykkede på SPACE mens videoen var ved at indlæse.

Hov, der kom jeg vist lidt ud af et sidespor...

Hvis ikke du er en af dem, som benytter et keyboard til at navigere rundt på et website er det ikke sikkert du overhovedet har opdaget dette lille trick, før du begyndte at interessere dig for tilgængelighed.
For besøgende, der benytter keyboardet til at navigere med, er det dog en af de mere simple måder du kan være med til at forbedre tilgængeligheden på et website.

“Skip to content”-elementet er et skjult link på websitet, og typisk det første element, der opnår fokus når vi benytter TAB til at navigere med. Linket henviser til sidens indholdsområde og gør det på den måde muligt at springe over bl.a. navigationen og komme direkte til det der er interessant — sidens indhold.
Typisk er navigationen placeret før sides indhold, hvilket bevirker du kan være tvunget til at trykke på TAB igen og igen og igen før du til sidst kommer forbi navigationen og videre til det link i indholdet du gerne vil åbne.
Kigger du eks. på et website med mange artikler, kan du nok godt forestille dig du hurtig bliver træt af at skulle trykke på TAB 10–15 gange før du når til linket i indholdet — især når du er i gang med at læse din femte artikel eller indlæg!

HTML

Lad os starte med at få HTML-koden på plads.

<a href="#page-content" class="skip-to-content">Skip to content</a>

Først har vi linket, som typisk vil være det første fokuserbare element efter <body>, hvor href="#page-content" skal matche id’et på dit indholdsområde, og så skal linket selvfølgelig have en klasse så vi kan tilpasse udseendet med lidt CSS.
Jeg har set nogle enkelte websites, som vælger først at placere linket efter websitets logo, men personligt foretrækker jeg at have det som det første element på websitet.

<div id="page-content" class="content" tabindex="-1">...</div>

Før end linket virker kræver det et element med et id der kan linkes til, som eksemplet ovenfor, hvor id="page-content" skal være det samme som linket henviser til og så skal tabindex="-1" [4] sættes for at elementet kan opnå fokus, men samtidig ikke er fokuserbart på normal vis ved at trykke på TAB.

<a id="page-content"></a>

Har dit website en navigation, der altid er placeret i toppen af siden, selvom vi scroller ned på siden, kan der opstå problemer i forhold til at der ikke scrolles langt nok ned på siden.
Der kan det i stedet være praktisk at benytte et a med dit id i stedet. På den måde kan du nemlig justere din margin ned til indholdet, så der tages højde for navigationens højde.

Jeg har ikke kunne finde information om denne metode på nettet, og kun selv benyttet det på et enkelt website, så er lidt usikker på om den skulle have nogle uforudsete konsekvenser.
Indtil jeg har gjort mig flere erfaringer, benytter jeg derfor stort set altid et div — blot for at være sikker.

CSS

Med HTML’en på plads skal der noget CSS til, både for at skjule elementet til det opnår fokus, men også for at tilpasse udseendet af vores link.

.skip-to-content {
    border: 1px solid #333;
    background: #fff;
    color: #333;
    left: 0;
    opacity: 0;
    padding: 0.75em 1em;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity 0.2s, visibility 0s 0.2s, z-index 0s 0.2s;
    visibility: hidden;
    white-space: nowrap;
    z-index: -1;
}
.skip-to-content:focus {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s;
    visibility: visible;
    z-index: 5;
}
.content {
    outline: none;
}

Jeg vil ikke gennemgå hver eneste egenskab, men i stedet nøjes med at fremhæve, at det vigtige her er .skip-to-content:focus, og de egenskaber den indeholder, som er den del af vores CSS, der gør at elementet bliver synligt når linket opnår fokus.
Derudover har jeg i mit eksempel her valgt at animere linket, så det fader ind når det opnår fokus, og nogle vil måske tænke det er overflødigt, for dem der benytter en screen reader ser det ikke alligevel.
Der vil jeg dog godt argumentere for at det ikke alle, som kommer rundt på nettet via keyboardet, der også benytter en screen reader, og hvis vi alligevel benytter lidt animationer øvrige steder på websitet, hvorfor så ikke også gøre det her?

Resultat

Som enhver god TV-kok har jeg selvfølgelig snydt lidt hjemmefra, og kodet noget på CodePen, og ellers har jeg også funktionen her på websitet.

Du skal dog ikke snydes for et par links til andre websites, der alle gør brug af dette lille trick.

https://www.smashingmagazine.com/
https://www.filamentgroup.com/lab/
https://www.sitepoint.com/
https://www.bbc.com/

Dansk oversættelse

På engelsk skriver de typisk “Skip to content”, og laver vi en ord for ord oversættelse til dansk vil den komme til at lyde “Spring til indhold”, hvilket lyder lidt kunstigt.
Jeg har kigget på nogle forskellige danske websites, og fundet 11 med denne funktionalitet. På 4 af dem benytter de “Gå til hovedindhold”, men ordet “hovedindhold” er jeg ikke fan af da det lyder lidt fordansket og teknisk. “Spring hovednavigationen over” eller “Spring navigationen over” bliver brugt på 3 af dem, men den synes jeg heller ikke er helt god, for så handler det i stedet om navigationen og ikke det indhold vi flytter fokus til.

Jeg har derfor gået og tænkt lidt over, hvad der kunne være en bedre ordlyd, der samtidig er lige så kort og præcis som den engelske udgave.
Med lidt hjælp fra et par sprogkyndige kollegaer, er jeg kommet frem til at “Gå til indhold”, “Vis indhold” og “Fortsæt til indhold” kunne være tre gode bud, men at hvis man kan henvise til typen af indhold og benytte eks. “artikel”, “produktbeskrivelse” eller lign. i stedet for ordet “indhold”, så vil det bestemt ikke gøre noget.

Jeg er med på at det her også er en smagssag, men jeg synes den bedste danske oversættelse er:

Fortsæt til indhold

Det er ikke sikkert du er enig i valget, men så kan det måske inspirere dig til at finde det du synes lyder bedst, og har jeg overset et godt bud, så smid endelig dit forslag min vej, så tilføjer jeg det i en lille liste her i indlægget.

Det er egentligt forbløffende, hvor meget jeg kan skrive om noget der trods alt er ret simpelt, men jeg håber alligevel det har gjort dig lidt klogere på denne lille hjælpefunktion.

Har du nu kun fire menupunkter i navigationen, kan jeg nok godt overtales til at det ikke er nødvendigt med et link direkte til indholdet, men det er klart at jo flere menupunkter desto større er frustrationen over at skulle trykke på TAB igen og igen og igen for at komme til indholdet.
Omvendt så er det så nemt at tilføje til et website, at du nok vil skulle bruge længere tid på at komme med et godt argument imod, end tiden det vil tage rent faktisk at tilføje det.

Til sidst vil jeg kun opfordre til at du også selv går på jagt efter et easter egg... hvem ved, måske jeg endda har gemt et lille et her på siden!

  1. easter egg er ikke dem fra påskeharen, men et begreb kendt indenfor programmering, især indenfor spilverdenen — https://en.wikipedia.org/wiki/Easter_egg_(media) ↩︎

  2. Adventure hed spillet til Atari fra 1979, som indeholdte det første easter egg, der blev opdaget — https://www.gamecrate.com/ready-player-one-atari-adventure-and-origin-easter-eggs/18695 og https://www.nytimes.com/2019/08/08/technology/easter-eggs-tesla-google.html ↩︎

  3. snake kunne godt være et puddelrock band fra 80’erne, men er navnet på det kendte spil fra de gamle Nokia telefoner — https://en.wikipedia.org/wiki/Snake_(video_game_genre) ↩︎

  4. tabindex=-1 kan du altid nørde lidt mere — https://webaim.org/techniques/keyboard/tabindex og https://www.scottohara.me/blog/2019/05/25/tabindex.html ↩︎