Kohdistuksen pitäminen modaalisessa valintaikkunassa
Estäkää sarkainta siirtymästä taustalla olevalle sivulle.
Kohdistuksen pitäminen modaalisessa valintaikkunassa on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Miksi kohdistuksen on pysyttävä sisällä
Kun modaali-ikkuna on avoinna, näppäimistön kohdistuksen pitäisi pysyä sen sisällä. Jos sarkain siirtyy taustalla olevalle sivulle, sokeat käyttäjät eksyvät sisältöön, jota he eivät näe.
Natiivi elementti auttaa
showModal()-metodilla avattu oikea dialog lukitsee kohdistuksen automaattisesti, mikä on tärkeä syy suosia sitä div-elementin sijaan.
Kun rakennat oman ratkaisun
Jos rakennat mukautetun modaali-ikkunan div-elementillä, sinun on lukittava kohdistus itse, koska mikään ei estä sarkainta siirtymästä sivulle.
Siirrä kohdistus sisään avattaessa
Siirrä kohdistus ensin modaali-ikkunan sisään sen avautuessa, yleensä ensimmäiseen ohjausobjektiin tai otsikkoon, jotta käyttäjä aloittaa oikeasta paikasta.
modal.querySelector('button').focus();Etsi kohdistettavat elementit
Kerää modaali-ikkunan kohdistettavat kohteet: linkit, painikkeet, syötekentät ja kaikki tabindex-määritteen sisältävät elementit. Tarvitset ensimmäisen ja viimeisen rakentaaksesi silmukan.
modal.querySelectorAll('a, button, input, [tabindex]');Siirry viimeisestä ensimmäiseen
Kun sarkainta painetaan viimeisessä elementissä, siirrä kohdistus takaisin ensimmäiseen. Näin käyttäjä kiertää sisällä eikä pääse ulos.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Siirry ensimmäisestä viimeiseen
Käsittele myös Shift+Tab ensimmäisessä elementissä: siirrä kohdistus viimeiseen, jotta myös taaksepäin siirtyminen pysyy lukittuna.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Estä sarkaimen oletustoiminto
Reunoilla on kutsuttava preventDefault()-metodia, muuten selain siirtää kohdistuksen ulos ennen kuin koodisi ehtii ohjata sen muualle.
e.preventDefault();Huomioi käytöstä poistetut ja piilotetut kohteet
Ohita disabled-määritteen sisältävät tai piilotetut elementit ensimmäistä ja viimeistä kohdetta valitessasi, koska niihin ei voi todellisuudessa kohdistaa.
Älä unohda taustaa
Kohdistuksen lukitseminen yhdistyy taustalla olevan sivun tekemiseen inert-tilaan, jotta edes harhautunut napsautus tai ruudunlukija ei pääse siihen modaali-ikkunan ollessa avoinna.
Testaa näppäimistöllä
Siirry sarkaimella koko modaali-ikkunan läpi ja tarkkaile, kuinka kohdistuskehys kiertää poistumatta koskaan. Tämä kierros osoittaa, että lukitus toimii. ✅
Pikatarkistus
Rakensit mukautetun div-modaali-ikkunan. Mitä sinun on tehtävä, jotta sarkain pysyy sen sisällä?
Kertaus: pidä kohdistus sisällä
Opit siirtämään kohdistuksen sisään avattaessa ja kierrättämään sitä molemmissa reunoissa, jotta näppäimistön käyttäjät pysyvät modaali-ikkunassa, kunnes päättävät sulkea sen. 🎯
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Kohdistuksen pitäminen modaalisessa valintaikkunassa” ilmainen?
Kyllä – oppitunnin ”Kohdistuksen pitäminen modaalisessa valintaikkunassa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Kohdistuksen pitäminen modaalisessa valintaikkunassa”?
Estäkää sarkainta siirtymästä taustalla olevalle sivulle. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Kohdistuksen pitäminen modaalisessa valintaikkunassa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Valintaikkunoiden roolit ja natiivi dialog-elementti
- Kohdistuksen pitäminen modaalisessa valintaikkunassa
- Sulkeminen Escapella ja kohdistuksen palauttaminen
- Passiivinen tausta ja aria-modal