Helppokäyttöiset tarkennustilat: Näkyvän näppäimistön tarkennuksen suunnittelu
Kuinka suunnitella näkyvä näppäimistötarkennus, joka täyttää WCAG 2.2:n: mitä 2.4.7 ja 2.4.13 vaativat, miten :focus-visible toimii ja suunnitteluvinkkejä tarkennusrenkaisiin.
Core Takeaway
Jokainen interaktiivinen elementti tarvitsee selkeästi näkyvän tarkennusilmaisimen näppäimistön käyttäjille; WCAG 2.2 vaatii sen tasolla AA (2.4.7). Vahvan indikaattorin saamiseksi tähtää WCAG:n AAA-ohjaukseen (2.4.13): vähintään 2 CSS pikselin ääriviivan alue elementin ympärillä, jossa on 3:1-kontrasti fokusoituneiden ja tarkentamattomien tilojen välillä. Käytä :focus-visible näyttääksesi renkaat näppäimistön käyttäjille näyttämättä niitä jokaisella hiiren napsautuksella.
Miksi painopistetiloilla on väliä
Ihmiset, jotka käyttävät näppäimistöä, vaihtolaitetta tai näytön suurennuslasia, liikkuvat sivulla elementti kerrallaan. Tarkennusindikaattori on ainoa tapa, jolla he tietävät, missä he ovat. Selaimen ääriviivojen poistaminen ilman korvaamista on yksi yleisimmistä esteettömyysongelmista.
Mitä WCAG 2.2 vaatii
Onnistumiskriteeri 2.4.7 Focus Visible (AA-taso) edellyttää, että jokaisessa näppäimistöllä toimivassa käyttöliittymässä on tila, jossa tarkennuksen ilmaisin on näkyvissä. WCAG 2.2 lisätty 2.4.13 Focus Appearance (taso AAA), joka kuvaa vahvaa indikaattoria: vähintään yhtä suuri kuin komponentin 2 CSS pikselin paksuisen kehän alue, jossa kontrastisuhde on vähintään 3:1 tarkennetun ja tarkentamattoman tilan välillä.
:tarkennus-näkyvä
MDN selittää, että :focus-visible koskee, kun elementillä on kohdistus ja selain päättää heuristiikan avulla, että kohdistus tulee näyttää, tyypillisesti näppäimistön käytössä. Sen avulla voit näyttää voimakkaita tarkennusrenkaita näppäimistön käyttäjille näyttämättä niitä aina, kun joku napsauttaa painiketta hiirellä. Käytä sitä ääriviivojen poistamisen sijaan.
Sormuksen suunnittelu
Käytännön opastus:
- Käytä ääriviivaa tai rengasta, jossa on siirtymä, jotta se ei sulaudu elementtiin.
- Tarkista kontrasti jokaista taustaa vasten, jolla elementti voi esiintyä; kaksivärinen rengas auttaa.
- Pidä se johdonmukaisena kaikissa komponenteissa, jotka on määritelty suunnittelujärjestelmäsi tunnukseksi.
- Älä koskaan luota vain hienovaraiseen värinmuutokseen.
- Varmista, että kohdistettu elementti ei ole piilossa tahmeiden otsikoiden takana.
Tarkennus ja liike
Tarkennusrengas voi ilmestyä hyvin lyhyellä siirtymällä, mutta sen pitäisi tuntua välittömältä. Vältä animaatioita, jotka viivästävät rengasta tai siirtävät elementtiä, ja mukautettuja kankaalle piirrettyjä osia varten varmista, että sivulla on edelleen todellinen tarkennettavissa oleva elementti, jotta näppäimistön käyttäjät voivat tavoittaa sen.
Avain Principles muistettavat
- Näkyvä tarkennus vaaditaan kohdassa WCAG AA (2.4.7)
- 2.4.13 (AAA): 2px-kehäalue ja 3:1 kontrastin muutos
- Käytä :focus-visible ääriviivojen poistamisen sijaan
- Määritä tarkennusrengas suunnittelutunnukseksi
- Canvas-renderöity käyttöliittymä tarvitsee todellisia tarkennettavia elementtejä
Usein kysytyt kysymykset
Lähteet
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Web Docs