Miért fontos a navigációs linkek kihagyása?
A navigációs linkek kihagyása számos előnnyel jár:
- Továbbfejlesztett használhatóság: Csökkenti a menükben való navigáláshoz szükséges erőfeszítést a segítő technológiákra támaszkodó felhasználók számára.
- Továbbfejlesztett hozzáférhetőség: Biztosítja az akadálymentesítési irányelveknek, például a WCAG és az ADA szabványoknak való megfelelést.
- Jobb felhasználói élmény: Megkönnyíti az oldal navigációját minden felhasználó számára.
Lépésről lépésre útmutató a navigációs linkek kihagyásához
1. lépés: HTML hozzáadása az átugró hivatkozásokhoz
Add hozzá az átugró link HTML-kódját a webhelyed fejlécfájljának tetejéhez:
Ugrás a fő tartalomra
Biztosítsa a href az attribútumpontokat a fő tartalomtároló azonosítójához rendeli.
2. lépés: Adjon hozzá egy azonosítót a fő tartalomhoz
A WordPress témádban keresd meg a fő tartalomtárolót, és adj hozzá egy azonosítót:
3. lépés: Az ugrókapocs stílusának meghatározása
Stílusozd meg az átugró linket úgy, hogy látható legyen, amikor fókuszban van. Add hozzá a következő CSS-t a témádhoz:
.skip-link { pozíció: abszolút; felső: -40px; bal: 0; háttér: #000; szín: #fff; kitöltés: 10px; szövegdekoráció: nincs; z-index: 100; } .skip-link:focus { felső: 0; }
4. lépés: Tesztelje az ugrókapcsot
Használjon billentyűzetet a webhelyen való navigáláshoz, és ellenőrizze, hogy az átugrási hivatkozás megjelenik-e és megfelelően működik-e. Nyomja meg a gombot. Tab hogy az ugróhivatkozásra koncentráljon, és Enter aktiválni.
Navigációs linkek átugrásának ajánlott gyakorlatai
- Először az ugróhivatkozásokat kell elhelyezni: Győződjön meg arról, hogy az átugró link az oldal első fókuszálható eleme.
- Használjon átlátszó címkéket: A link szövegének egyértelműen jeleznie kell a célját, pl. „Ugrás a fő tartalomra”.
- Eszközök közötti tesztelés: A működés ellenőrzése asztali számítógépeken, táblagépeken és mobileszközökön.
Esettanulmányok: Skip Links működés közben
1. esettanulmány: Oktatási weboldal
Egy oktatási platform átugró hivatkozásokat vezetett be, ami jobb navigációt eredményezett a képernyőolvasókat használó diákok számára, és 15%-os javulást az akadálymentesítési pontszámokban.
2. esettanulmány: E-kereskedelmi áruház
Egy online kiskereskedő átugró hivatkozásokat adott a navigációs menüjéhez, csökkentve a visszafordulási arányt és javítva a billentyűzetet használók használhatóságát.
GYIK: Navigációs hivatkozások hozzáadása
Mik azok a navigációs linkek kihagyása?
A navigációs hivatkozások kihagyása lehetővé teszi a felhasználók számára, hogy megkerüljék az ismétlődő navigációs menüket, és közvetlenül az oldal fő tartalmához ugorjanak.
Szükségesek az átugró linkek az akadálymentesítési megfelelőséghez?
Bár nem kifejezetten kötelező, az átugró linkek segítenek a WCAG irányelveinek teljesítésében azáltal, hogy javítják a navigációt a segítő technológiák felhasználói számára.
Hozzáadhatok ugró linkeket kód szerkesztése nélkül?
Igen, néhány akadálymentesítési bővítmény, mint például WP One Tap Accessibility Plugin automatikusan hozzáadhat átugró linkeket.
Működnek az átugró linkek mobil eszközökön?
Igen, megfelelően megvalósítva az átugró linkek minden eszközön működnek, beleértve a mobilosakat is.
Hogyan tesztelhetem a navigációs linkek kihagyását?
Használj billentyűzetet a webhelyeden való navigáláshoz, és győződj meg róla, hogy az átugró link fókuszálható és működőképes.
