Klaviatūros naršymas yra labai svarbus žiniatinklio prieinamumo aspektas, leidžiantis vartotojams sąveikauti su jūsų svetaine naudojant tik klaviatūrą. Ši funkcija yra būtina asmenims su judėjimo negalia ir vartotojams, kurie naudoja pagalbines technologijas. Šiame vadove nagrinėsime, kaip pridėti klaviatūros naršymą prie savo „WordPress“ svetainės, užtikrinant, kad ji būtų prieinama ir patogi vartotojui.
Kodėl svarbi klaviatūros navigacija
Klaviatūros navigacija pagerina naudojimą ir užtikrina, kad jūsų svetainė atitiktų prieinamumo standartus, tokius kaip WCAG. Pagrindiniai privalumai:
- Įtraukimas: Palaiko vartotojus su negalia ir tuos, kurie teikia pirmenybę klaviatūros sąveikai.
- Geresnis SEO: Paieškos sistemos teikia pirmenybę prieinamoms svetainėms.
- Patobulinta vartotojo patirtis: Patobulina naršymą visiems vartotojams, nepriklausomai nuo jų gebėjimų.
Žingsnis po žingsnio vadovas, kaip pridėti klaviatūros naršymą
1 veiksmas: naudokite semantinį HTML
Semantinis HTML suteikia tvirtą pagrindą klaviatūros naršymui. Naudokite tinkamas žymas interaktyviems elementams, pvz., mygtukams, nuorodoms ir formoms.
Pateikti Sužinokite daugiau
2 veiksmas: įsitikinkite, kad matomi fokusavimo indikatoriai
Fokusavimo indikatoriai paryškina šiuo metu fokusuotą elementą, padėdami vartotojams suprasti savo vietą puslapyje. Pridėkite šį CSS kodą prie savo stiliaus lapo:
mygtukas:focus, a:focus { kontūras: 2px solid #005fcc; kontūro poslinkis: 2 pikseliai; }
3 veiksmas: patikrinkite skirtukų tvarką
Tabuliavimo tvarka lemia, kaip vartotojai naršo jūsų svetainėje naudodami Tab raktas. Užtikrinkite loginį srautą peržiūrėdami HTML struktūrą ir naudodami tabindex atributą, kur reikia.
Pradėti čia
4 veiksmas: pridėkite praleistas nuorodas
Praleidimo nuorodos leidžia vartotojams apeiti pasikartojantį turinį ir pereiti tiesiai prie pagrindinio turinio. Įdėkite šį kodą puslapio viršuje:
Pereiti prie pagrindinio turinio
5 veiksmas: įdiekite ARIA vaidmenis
ARIA vaidmenys suteikia papildomo konteksto ekrano skaitytuvams. Naudokite tokius vaidmenis kaip role="menu" bei role="menuitem" navigacijai pagerinti.
Pradžia Apie
6 veiksmas: patikrinkite savo svetainę
Rankiniu būdu išbandykite savo svetainę naudodami Tab Svarbiausia užtikrinti, kad visi interaktyvūs elementai būtų prieinami. Norėdami gauti daugiau įžvalgų, naudokite tokius įrankius kaip „Lighthouse“ arba „WAVE“.
Geriausia klaviatūros naršymo praktika
- Įsitikinkite, kad visi interaktyvūs elementai yra fokusuojami.
- Pateikite aiškius ir matomus fokusavimo indikatorius.
- Palaikykite logišką tabuliavimo tvarką visoje svetainėje.
- Paskirtis
aria-labelatributai papildomam kontekstui, kur reikia.
Atvejų analizės: sėkmingas klaviatūros naršymo įdiegimas
1 atvejo analizė: el. prekybos svetainė
Internetinė parduotuvė įdiegė klaviatūros naršymą ir fokusavimo indikatorius. Šie pakeitimai padidino konversijų rodiklį 18 % ir pagerino vartotojų pasitenkinimą.
2 atvejo analizė: švietimo tinklaraštis
Tinklaraštyje pridėtos praleidimo nuorodos ir optimizuota tabuliavimo tvarka, taip 15 % sumažinant atmetimo rodiklius ir pagerinant atsiliepimų apie prieinamumą balus.
DUK: Klaviatūros naršymas
Kodėl svarbi klaviatūros navigacija?
Klaviatūros naršymas užtikrina, kad jūsų svetaine galėtų naudotis asmenys, negalintys naudotis pele, taip padidinant įtraukumą ir prieinamumą.
Kaip patikrinti klaviatūros naršymą?
Naudokite Tab raktas naršyti svetainėje ir patikrinti, ar visi interaktyvūs elementai yra prieinami ir logiški.
Kokios priemonės gali padėti atliekant prieinamumo testavimą?
Tokios priemonės kaip „Lighthouse“, „WAVE“ ir „Axe DevTools“ teikia išsamius prieinamumo auditus ir rekomendacijas.
Kas yra ARIA vaidmenys ir kodėl jie naudingi?
ARIA vaidmenys suteikia papildomos informacijos apie pagalbinių technologijų elementus, pagerindami naršymą ir naudojimo paprastumą.
Ar galiu pritaikyti fokusavimo indikatorius?
Taip, naudokite CSS, kad fokusavimo indikatoriai atitiktų jūsų svetainės dizainą ir išlaikytų matomumą.
