Klaviatūros naršymas: Esminis įrankis prieinama projektams

Ne visi vartotojai gali naudoti pelę. Išmokite kurti puikiai veikiančius klaviatūros naršymo patirties ir focus indikatorius.

14 min skaitymo Vidutinis lygis Birželis 2026

Žmogus naudojantis židiniu naršymą perimant klaviatūrą be pelės, dėmesio indikatoriaus matomas ekrane

Kodėl klaviatūros naršymas yra kritiškas?

Daugybė žmonių naudoja tik klaviatūrą. Tai gali būti nuolatinis pasirinkimas arba laikinai iškylanti poreikis dėl sužalojimo ar operacijos. Jei jūsų projektas nepalaikytų tinkamai klaviatūros naršymo, jūs efektyviai atmestumėte didelę vartotojų grupę.

Motoriniu negalimu turinčios žmonės, kurie naudoja kitos rūšies įrangą — nuo joystick kontrolerių iki akies sekimo sistemų — taip pat priklauso nuo to, kad jūsų interaktyvūs elementai būtų pasiekiami per Tab ir Enter. Tai nėra sudėtinga padaryti. Tai reikalauja nuodugnaus supratimo ir pastebėjimo.

Pagrindiniai faktai

Apie 15% interneto vartotojų turi kažkokią judėjimo negalią
Dauguma naudoja klaviatūrą kaip pirminę navigacijos priemonę
Kai kurie naudoja specialias klaviatūras arba klievinius
Kiti naudoja išorinę įrangą, kuri emituoja klaviatūros įvestį

Focus indikatoriai: Numatyti, bet matomi

Dauguma naršyklių turi numatytuosius focus stilius. Jie dažnai yra tamsios spalvos kontūras — ne patrauklus, bet akivaizdus. Problema? Dizaineriai jie dažnai panaikina, nes jiems nepatinka jų išvaizda.

Niekada nešalinkite focus indikatoriaus be pakeitimo. Jei naudotumėte outline: none; arba :focus { outline: 0; } , jūs sukursite nenavigabilų svetainę tiems, kurie naudoja Tab klavišą. To nepriimtina.

Neteisingai:

a:focus { outline: none; }

Tiesiog padarykite jį savitą. Naudokite spalvą iš jūsų dizaino sistemos, padarykite jį pakankamai kontrastvingą ir pakankamai matomą. Išmokite suderinti jį su jūsų kita estetika, jei reikia.

Ekrano nuotrauka, rodanti ryškų mėlyną focus indikatorių aplink mygtuką

Diagramoje pavaizduota Tab klavišo naršymo seka, nurodanti logišką elementų eilutę

Tab eilutė: Logika, kuri svarbi

Kai vartotojas spaudžia Tab, jis juda tarp fokusavimų elementų. Eilutė turėtų būti logiška. Iš kairės į dešinę, iš viršaus į apačią — tai, ko tikisi kiekvienas.

Kartais CSS Flexbox ar Grid gali pakeisti vizualinę tvarką. Jei HTML eilutė neatitinka ekrane matomos eilutės, Tab naršymas jausis sumaišytas. Kai kurie vartotojai supranta, bet daugeliui tai sutrinka patirtį.

Patarimas: Testuokite su Tab

Uždarkite pelę. Žaidykite tik Tab ir Shift+Tab. Pasidaro keistas? Problema gali būti HTML eilutė arba CSS. Išdėstykite elementus logiškai HTML ir palikite CSS atlikti tik vizualų skirtelį.

Interaktyvūs elementai turi būti pasiekiami

Ne visos galiausiai naršytos sekmės. Banguose meniu, išskleidžiami sąrašai ir dialogo langai turi suprasti, ką daro Escape ir Enter. Paspaudus Enter arba tarpą mygtuke, jis turėtų aktyvuoti. Paspaudus Escape dialogo lange, jis turėtų uždaryti.

Šios nėra keistos reikalavimas. Tai standartinės konvencijos, kurias žmonės tikisi. Jei jūsų mygtukai nereaguoja į Espace arba Enter, jūs sulaužete vartotojų modelį ir sutrinkite jų patirtį.

Padarykite mygtuką <button>

Jei jis veikia kaip mygtukas, naudokite <button> HTML elementą. Jis automatiškai palaikys Enter ir Space.

Nurodykite role, jei naudojate <div>

Jei iš kokių nors priežasčių naudojate <div role="button">, pridėkite JavaScript, kad būtų galima naudoti Enter ir Space.

Testuokite visus klavišus

Pabandykite Espace, Enter, Tab, Escape, rodyklės klavišus. Jie veikia? Geras ženklas.

Žmogus tiesia ranką prie kompiuterio klaviatūros, kuri didelis mėlynas Tab raktas šviečia

Ekrano nuotrauka, rodanti „Praleisti į pagrindinį turinį

Praleisti nuorodos: Didelė pagalba, mažas darbas

Dauguma svetainių turi daug navigacijos viršuje. Logo, meniu, paieška — visa tai prieš pagrindinį turinį. Klaviatūros vartotojai turėtų galėti praleisti visa tai ir iškart patekti į turinį. Tai vadinama „Skip link".

Jis turėtų būti pirmasis fokusavimas elementas. Paprastai jis paslėptas, bet matomas, kai gausite Tab. Paspaudę Enter, jis nuveda tiesiai į pagrindinę turinio sritį. Yra labai paprastas padaryt, bet šokina tokį didelį skirtumą.

"Skip links yra vienas iš pigiausių prieigos pagerinimų, kuriuos galite įdiegti. Tik kelios eilutės HTML ir CSS. Tačiau jei vartotojas naudoja klaviatūrą, jis pastebi skirtumą iš karto."

Baigtis: Numatykite, testuokite, peržiūrėkite

Klaviatūros naršymas nėra sudėtingas dalykas. Dauguma reikalavimų yra greiti HTML pasirinkimai ir nedideli CSS pridėjimai. Focus indikatoriai. Tinkama Tab eilutė. Atsakyti mygtukams į Enter. Praleisti nuorodas.

Bet jei norite padaryti tai teisingai, turite testuoti. Uždarkite pelę. Grinkitės Tab. Žaidykite su interaktyviais elementais. Jei jaučiatės susimaitę arba prarasti, taip pat daryti jūsų vartotojai. Grąžinkite į kodą ir pataisykite.

Šis procesas yra iteratyvus. Nėra tobulo pirmą kartą. Bet kiekvienas pasikeitimas, kurį padarote, pagerėja iš tikrojo žmogaus patirties. Ir tai tikslus dalykas.

Išsamumas įspėjimas

Individualūs mokymo rezultatai skiriasi nuo žmogaus. Šis straipsnis pateikia švietimo medžiagą, skirtą suprasti prieinamumo principus. Kiekvienas projektas yra unikalus, ir jūs turėtumėte testuoti savo sprendimus su tikraisiais vartotojais ir prieinamumo įrankiais.