Kohdistusloukku

Kohdistusloukku on tarkoituksellinen rajoite näppäimistönavigointiin: modaalivalintaikkunan ollessa auki Tab-näppäin kiertää ainoastaan valintaikkunan sisällä olevien kohdistettavien elementtien välillä. Shift+Tab toimii vastakkaiseen suuntaan. Käyttäjä ei pääse Tab-näppäimellä takaisin (visuaalisesti peitettyyn) taustasivuun ennen kuin sulkee valintaikkunan.

Kohdistuksen loukkaaminen on pakollista saavutettaville modaalivalintaikkunoille. Ilman sitä näppäimistö- ja ruudunlukuohjelmien käyttäjät päätyvät näkymättömälle sivun sisällölle, jota he eivät näe eivätkä pääse pois.

Miksi tämä on välttämätöntä

Modaalivalintaikkuna esitetään visuaalisesti kerroksena sivun päällä. Tarkoitus on selvästi se, että käyttäjä on vuorovaikutuksessa modaalin kanssa kunnes on valmis, minkä jälkeen hän palaa sivulle. Hiirenkäyttäjille tämä on intuitiivista: modaalin ulkopuolelle klikkaaminen ei tee mitään (tai sulkee sen); modaalin sisälle klikkaaminen avaa modaalin ohjaimet.

Ilman kohdistusloukkua näppäimistökäyttäjät saavat epäjohdonmukaisen kokemuksen:

1. Modaali avautuu. Kohdistus siirtyy (tai pitäisi siirtyä) ensimmäiseen kohdistettavaan elementtiin sisällä.
2. Käyttäjä painaa Tab. Kohdistus siirtyy modaalin sisällä seuraavaan kohdistettavaan elementtiin.
3. Käyttäjä jatkaa Tab-painamista. Kohdistus saavuttaa lopulta viimeisen kohdistettavan elementin modaalissa.
4. Yksi Tab lisää. Ilman loukkua kohdistus hyppää seuraavaan kohdistettavaan elementtiin dokumentissa — joka on jossain modaalin takana, käyttäjälle näkymättömissä.

Ainoa signaali käyttäjälle tästä on, että modaalin kohdistusindikaattori katoaa. Hän ei tiedä, missä kohdistus on.

Täydellinen modaalikaava

Täydellinen saavutettava modaali sisältää:

1. Kohdistus siirtyy modaaliin sen avautuessa — yleensä ensimmäiseen kohdistettavaan elementtiin tai modaalin otsikkoon (jos otsikolla on tabindex="-1" ohjelmallista kohdistusta varten).
2. Kohdistus on loukattu modaalin sisällä: Tab viimeisestä elementistä palaa ensimmäiseen; Shift+Tab ensimmäisestä palaa viimeiseen.
3. Escape sulkee modaalin ja palauttaa kohdistuksen käynnistävälle elementille, joka avasi sen (ei dokumentin bodylle).
4. Modaalin ulkopuolelle klikkaaminen sulkee sen — valinnainen toiminto; kaikki modaalit eivät tee tätä, mutta jos modaalisi tekee, sen on silti loukatava kohdistus sen ollessa auki.
5. role="dialog" ja aria-modal="true" modaalielementissä, ja aria-labelledby osoittaa modaalin otsikkoon.

Toteutukset

Eniten viitattu kirjasto on focus-trap (npm: focus-trap, focus-trap-react, focus-trap-vue) — pienikokoinen, riippuvuuksista vapaa, käsittelee kaikki reunatapaukset (näkymättömien elementtien ohittaminen, inert-integrointi, kohdistuksen palauttaminen suljettaessa).

Moderni selaimen primitiivi on <dialog> ja dialog.showModal(), joka loukkaa kohdistuksen automaattisesti ja käsittelee Escapen. Selaintuki on nyt riittävän vahva käytettäväksi lähtötilanteena.

Virhetapaus: “loukku, joka ei vapaudu”

Kohdistusloukun on vapauduttava modaalin sulkeutuessa. Yleisin toteutusvirhe on unohtaa palauttaa kohdistus alkuperäiseen käynnistyselementtiin — kohdistus päätyy tällöin dokumentin bodylle, jonka ruudunlukuohjelmat ilmoittavat tyhjäksi. Käyttäjä pudotetaan hiljaisuuteen ja joutuu aloittamaan tabuloinnin sivun yläosasta.