Bygge en hoppelenke som faktisk fungerer
Koble ankeret til et mål som kan få fokus.
Bygge en hoppelenke som faktisk fungerer er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
To deler av en skip-lenke
En fungerende skip-lenke har to deler: en ankerlenke som peker et sted, og et mål den faktisk kan lande på. Begge må finnes.
Ankerdelen
Ankerlenken er en vanlig lenke der href er et fragment, for eksempel et hash-tegn etterfulgt av en id. Når du klikker på den, forteller du nettleseren hvor den skal gå.
<a href="#main">Skip to main content</a>Måldelen
Målet er elementet du vil nå. Gi det en samsvarende id, slik at fragmentet i href har et sted å peke.
<main id="main"> ... </main>main er det naturlige målet
La skip-lenken peke på main-landemerket. Det er det ene området som inneholder sidens unike innhold, akkurat der brukerne vil lande.
Klikking er ikke nok
En gammel fallgruve: Lenken ruller siden, men fokuset blir værende på lenken. Neste gang brukeren trykker på Tab, sendes hen rett tilbake til navigasjonsmenyen.
Gjør målet fokuserbart
Løsningen er å la fokuset faktisk flyttes dit. Legg til tabindex lik minus én, slik at målet kan motta fokus fra skip-lenken.
<main id="main" tabindex="-1"> ... </main>Hvorfor minus én, ikke null
Minus én betyr at elementet kan nås med skript og som lenkemål, men ikke er med i Tab-rekkefølgen. Elementet blir ikke et uventet tabulatorstopp for alle andre.
Moderne nettlesere hjelper
I dag flytter de fleste nettlesere automatisk fokuset til fragmentmålet. Men hvis du legger til tabindex minus én, garanterer du at det fungerer overalt, så behold det.
Test med øre og øyne
Last inn siden på nytt, trykk på Tab én gang, og trykk deretter på Enter. Fokusindikatoren skal hoppe til innholdet, og neste Tab skal fortsette inne i det. ✅
La teksten være tydelig
Merk den tydelig. Skip to main content forteller brukeren nøyaktig hva som skjer, og er langt bedre enn en vag Skip eller et ikon.
Rekkefølgen på siden
Plasser ankerlenken som body-elementets første barn, før toppteksten, slik at Tab når den før alt annet på siden.
Rask sjekk
Hva gjør at fokuset faktisk kan lande på main-området?
Oppsummering
Koble en ankerlenke til en samsvarende id på main, legg til tabindex minus én, og test ved å tabbe. Da har du en skip-lenke som faktisk fungerer. 🎯
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Bygge en hoppelenke som faktisk fungerer» gratis?
Ja – hele teksten i «Bygge en hoppelenke som faktisk fungerer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bygge en hoppelenke som faktisk fungerer»?
Koble ankeret til et mål som kan få fokus. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Bygge en hoppelenke som faktisk fungerer»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hvorfor «Hopp til hovedinnhold» finnes
- Bygge en hoppelenke som faktisk fungerer
- Skjult visuelt til det får fokus
- Flere hoppelenker for store sider