Sisältö hoverilla tai kohdistuksella
Työkaluvihjeiden, ponnahdusikkunoiden ja muun hover- tai kohdistusaukeavan sisällön täytyy olla suljettavissa, tavoitettavissa osoittimella sekä pysyvää — se ei katoa ennen kuin käyttäjä sulkee sen tai kohdistus siirtyy pois laukaisijalta.
Mitä kriteeri vaatii
Kun lisäsisältö — työkaluvihje, ponnahdusikkuna tai alavalikko — avautuu käyttäjän viedessä osoittimen jonkin elementin päälle tai kohdistettua sitä, sen on täytettävä kolme vaatimusta. Suljettavuus: käyttäjä voi sulkea sen siirtämättä osoitinta tai kohdistusta (tavallisesti Escape-näppäimellä). Tavoitettavuus: jos käyttäjä siirtää osoittimen laukaisijalta avautuneeseen sisältöön, se pysyy auki. Pysyvyys: sisältö ei aikakatkaisu ja katoa niin kauan kuin käyttäjä on laukaisijalla tai sen sisällä.
Miten vaatimus täytetään
- Kytketään Escape sulkemaan kaikki hover- tai kohdistusaukeavat työkaluvihjeet ja ponnahdusikkunat.
- Varmistetaan, että itse työkaluvihjeelementin voi saavuttaa hiirellä — se ei saa sijaita niin, että osoittimen siirtyminen sinne laukaisee mouseout-tapahtuman laukaisijalla.
- Ei aikakatkaista työkaluvihjeitä, kun käyttäjä on yhä laukaisijalla.
- Käytetään
aria-describedby-ominaisuutta yhdistämään laukaisija ponnahdusikkunaan, jotta ruudunlukuohjelmat ilmoittavat sisällön. - Rakennetaan ponnahdusikkunat HTML:n
popover-attribuutilla tai testatulla kirjastolla (Popper.js, Floating UI, Radix UI) — ne toteuttavat nämä säännöt valmiiksi. - Pudotusvalikoissa jätetään pieni siirtymävara päävalikkoelementin ja alivakon väliin, jotta osoitin voi liikkua niiden välillä ilman sulkeutumista.
Yleisiä epäonnistumisia
- CSS-only
:hover-työkaluvihjeet, joissa on aukko laukaisijan ja vihjetekstin välillä — osoitin liikkuu aukkoon, mouseout-tapahtuma laukeaa, vihjeteksti katoaa. - Työkaluvihjeet, jotka sulkeutuvat automaattisesti 2 sekunnin jälkeen, vaikka käyttäjä on yhä niiden päällä.
- Ei Escape-näppäinkäsittelijää — näppäimistökäyttäjät eivät voi sulkea kohdistuksella avautunutta vihjetekstiä siirtymättä kentästä pois.
- Pudotusvalikot, jotka sulkeutuvat heti osoittimen siirtyessä pois pääelementistä, ennen kuin alivalikolle ehditään.
- Kohdistuksella avautuvat ponnahdusikkunat, joita ei voi sulkea Escapella — ne jäävät näkyviin.
Miksi kriteeri on tärkeä
Tätä kriteeriä rikotaan useimmin käsintehdyissä työkaluvihjeissä ja CSS-only pudotusvalikoissa. Kannattaa siirtyä kirjastoon, joka käsittelee suljettavuuden ja tavoitettavuuden valmiiksi, tai auditoida oma koodi kolmen säännön suhteen. Korjauksen vaikutus on suuri: hover-sisältöä on tavallisesti kaikkialla monimutkaisessa käyttöliittymässä, joten yhteiskomponentin korjaus poistaa auditoijataakin kerralla.