Hvorfor Hopp over navigasjonslenker er viktige
Hopp over navigasjonslenker gir flere fordeler:
- Forbedret brukervennlighet: Reduserer innsatsen som kreves for å navigere gjennom menyer for brukere som er avhengige av hjelpeteknologi.
- Forbedret tilgjengelighet: Sikrer samsvar med tilgjengelighetsretningslinjer som WCAG og ADA.
- Bedre brukeropplevelse: Gjør nettstedet ditt enklere å navigere for alle brukere.
Steg-for-steg-veiledning for å legge til hopp over navigasjonslenker
Trinn 1: Legg til HTML for hopp over lenker
Legg til HTML-koden for en skip-lenke øverst i nettstedets headerfil:
Hopp til hovedinnhold
Forsikre deg om href attributtet peker til ID-en til hovedinnholdsbeholderen din.
Trinn 2: Legg til en ID i hovedinnholdet
I WordPress-temaet ditt, finn hovedinnholdsbeholderen og legg til en ID:
Trinn 3: Stiler hopp over-lenken
Stilen på hopp over-lenken skal sikre at den er synlig når den er i fokus. Legg til følgende CSS i temaet ditt:
.skip-link { posisjon: absolutt; topp: -40 piksler; venstre: 0; bakgrunn: #000; farge: #fff; padding: 10 piksler; tekstdekorasjon: ingen; z-indeks: 100; } .skip-link:fokus { topp: 0; }
Trinn 4: Test hopp over-lenken
Bruk et tastatur til å navigere på nettstedet ditt og kontroller at hopp over-lenken vises og fungerer som den skal. Trykk på Tab å fokusere på hopp over-lenken og Enter for å aktivere den.
Beste praksis for å hoppe over navigasjonslenker
- Plasser Skip Links først: Sørg for at hopp over-lenken er det første fokuserbare elementet på siden.
- Bruk klare etiketter: Lenketeksten bør tydelig angi formålet, f.eks. «Hopp til hovedinnhold».
- Test på tvers av enheter: Bekreft funksjonalitet på stasjonære datamaskiner, nettbrett og mobile enheter.
Casestudier: Skip Links i aksjon
Casestudie 1: Utdanningsnettsted
En utdanningsplattform implementerte hopplenker, noe som resulterte i bedre navigasjon for studenter som bruker skjermlesere og en forbedring på 15 % i tilgjengelighetspoeng.
Casestudie 2: Nettbutikk
En nettbutikk la til lenker for å hoppe over annonser i navigasjonsmenyen sin, noe som reduserte avvisningsfrekvensen og forbedret brukervennligheten for tastaturbrukere.
Vanlige spørsmål: Legge til koblinger for å hoppe over navigering
Hva er lenker for å hoppe over navigasjon?
Hopp over navigasjonslenker lar brukere hoppe over gjentakende navigasjonsmenyer og gå direkte til hovedinnholdet på siden.
Kreves det å hoppe over lenker for å overholde tilgjengelighetsregler?
Selv om det ikke er eksplisitt påkrevd, bidrar hopp over lenker til å oppfylle WCAG-retningslinjene ved å forbedre navigasjonen for brukere av hjelpeteknologi.
Kan jeg legge til hopp over lenker uten å redigere kode?
Ja, noen tilgjengelighets-plugins som WP One Tap Accessibility Plugin kan legge til hopp over lenker automatisk.
Fungerer hopp over-lenker på mobile enheter?
Ja, når de er riktig implementert, fungerer hopp over-lenker på alle enheter, inkludert mobil.
Hvordan tester jeg lenker for å hoppe over navigasjon?
Bruk et tastatur til å navigere gjennom nettstedet ditt, og sørg for at hopp over-lenken er fokuserbar og funksjonell.
