Näppäimistönavigointi

Mikä on näppäimistönavigointi?

Näppäimistönavigointi tarkoittaa, että verkkosivuston jokaista osaa voi käyttää pelkällä näppäimistöllä — ilman hiirtä, kosketuslevyä tai kosketusnäyttöä. Täysin näppäimistöllä käytettävä sivusto antaa käyttäjien tavoittaa kaikki linkit, painikkeet, lomakkeet, valikot ja mukautetut ohjaimet vakionäppäimillä.^[1]

Kuka tarvitsee näppäimistönavigointia?

Kolme pääryhmää tarvitsee näppäimistöä:

• Motorisista vammoista kärsivät ihmiset — Tämä kattaa ihmiset, joilla on halvaus, vapina, rasitusvamma tai raajan puuttuminen. Monet käyttävät kytkimiä tai suuntatikkuja, jotka lähettävät näppäimistösignaaleja.
• Ruudunlukuohjelman käyttäjät — Kaikki tärkeimmät ruudunlukuohjelmat tarvitsevat näppäimistöä sivujen navigointiin ja ohjainten käyttöön.
• Tehokäyttäjät — Kehittäjät, tiedonsyöttäjät ja muut, joille näppäimet ovat hiirtä nopeampia.

Vilkasliikenteisiä sivustoja pyörittäville organisaatioille — viranomaisportaaleille, pankkialustoille, vakuutuslaskureille — näppäimistön tuki ei ole kapea erikoisominaisuus. Se on vaatimus, joka koskee merkittävää osaa kävijöistä.

Mitkä ovat vakionäppäimet?

Käyttäjät odottavat yhdenmukaista näppäimistökäyttäytymistä:

• Tab — Siirtää kohdistuksen eteenpäin linkkien, painikkeiden ja lomakekenttien välillä
• Shift + Tab — Siirtää kohdistuksen taaksepäin
• Enter — Aktivoi linkit ja painikkeet
• Välilyönti — Vaihtaa valintaruutujen tilan, aktivoi painikkeet ja vierittää sivua
• Nuolinäppäimet — Navigoi komponenttien sisällä, kuten pudotusvalikoissa, välilehtipaneeleissa ja radiopainikkeryhmissä
• Escape — Sulkee ikkunat ja valikot ja palauttaa kohdistuksen avaajalle

Nämä mallit on dokumentoitu W3C:n ARIA Authoring Practices Guide (APG) -oppaassa, joka tarjoaa testattuja näppäimistökäyttäytymismalleja yleisille elementeille.^[2]

Mitä WCAG vaatii näppäimistön käytöltä?

WCAG:ssa on useita näppäimistöön liittyviä sääntöjä:

• 2.1.1 Näppäimistö (taso A) — Kaikkien ominaisuuksien pitää toimia näppäimistöllä. Tämä on yksi useimmin rikottuja WCAG-sääntöjä.
• 2.1.2 Ei näppäimistöloukkua (taso A) — Käyttäjä ei saa koskaan jäädä jumiin komponenttiin ilman näppäimistöulospääsyä.
• 2.4.3 Kohdistusjärjestys (taso A) — Kohdistuksen siirtymisjärjestyksen pitää olla looginen.
• 2.4.7 Kohdistus näkyvissä (taso AA) — Käyttäjän pitää nähdä, millä elementillä kohdistus on.
• 2.4.11 Kohdistuksen ulkonäkö (taso AA, WCAG 2.2) — Kohdistusindikaattorien pitää täyttää vähimmäiskoko- ja kontrastivaatimukset.^[1]

Lakitiimien on hyvä tietää, että näppäimistön tuki alkaa tasolta A — perustavin vaatimus. Sivusto, joka ei toimi näppäimistöllä, ei voi väittää minkään WCAG-tason vaatimustenmukaisuutta.

Mikä on kohdistuksenhallinta?

Kun modaali-ikkuna avautuu, kohdistuksen pitää siirtyä ikkunaan. Kun se sulkeutuu, kohdistuksen pitää palata sen avanneelle painikkeelle. Kun yhden sivun sovellus lataa uutta sisältöä, kohdistuksen pitää siirtyä uuteen sisältöön, jotta näppäimistökäyttäjät tietävät muutoksesta.^[3]

Huono kohdistuksenhallinta on yksi vakavimmista saavutettavuusvirheistä moderneissa verkkosovelluksissa. Käyttäjät eksyvät, ohittavat sisältöä tai toimivat elementtien kanssa, jotka ovat piilossa peittokuvan takana.

React-, Vue- tai Angular-kehyksiä käyttävien IT-tiimien pitää käsitellä kohdistuksenhallintaa ydintehtävänä, ei jälkikäteen hoidettavana asiana.

Mitkä ovat yleisimmät näppäimistövirheet?

Nämä ongelmat toistuvat auditoinnista toiseen:

• Vain hiirelle tarkoitetut tapahtumat — Klikkaus- tai hover-käsittelijät ilman näppäimistövastinetta. Ohjain toimii hiirellä mutta ei tee mitään, kun näppäimistökäyttäjä painaa Enter.
• Piilotetut kohdistusindikaattorit — CSS-tyyli outline: none poistaa selaimen oletuskohdistuskehyksen lisäämättä korvaavaa. Näppäimistökäyttäjät eivät tiedä, missä kohdistus on.
• Näppäimistöloukut — Modaali tai videotoistin kaappaa Tab-näppäimen eikä tarjoa Escape-ulospääsyä.
• Väärä tab-järjestys — CSS muuttaa elementtien visuaalista järjestystä, mutta HTML säilyttää vanhan. Kohdistus hyppää odottamattomiin suuntiin.
• Kohdistumattomat ohjaimet — Interaktiiviset elementit, jotka on rakennettu <div>- tai <span>-elementeistä ilman tabindex="0":aa ja näppäimistökäsittelijöitä. Näppäimistökäyttäjät eivät pääse niihin lainkaan.

Suurille sisältörikkaille sivustoille — kuten viranomaisportaaleille tai yliopistojen kurssiluetteloille — nämä virheet voivat estää tuhansia käyttäjiä kriittisten tehtävien suorittamisesta.

Miten Askem auttaa?

Suurille organisaatioille, jotka hallinnoivat monia sivuja ja komponentteja, automaattinen havaitseminen on ainoa käytännöllinen tapa löytää näppäimistön saavutettavuusvirheitä mittakaavassa. Jatkuvan saavutettavuusseurannan työkalut merkitsevät ongelmia kuten puuttuvat kohdistusindikaattorit, Tab-näppäimellä saavuttamattomat elementit ja interaktiiviset ohjaimet, joista puuttuu näppäimistötuki. Askemin kaltaiset työkalut havaitsevat nämä ongelmat, kun sivupohjan muutos tai uusi komponentti tuo ne mukanaan, ja hälyttävät tiimiä sen sijaan, että asian löytää käyttäjä tai vuotuinen saavutettavuusauditointi.

Lähteet

1. W3C — WCAG 2.2 Guideline 2.1 Keyboard Accessible: https://www.w3.org/TR/WCAG22/#keyboard-accessible
2. W3C WAI — ARIA Authoring Practices Guide: https://www.w3.org/WAI/ARIA/apg/patterns/
3. W3C WAI — Keyboard Compatibility: https://www.w3.org/WAI/perspective-videos/keyboard/