Sulkeminen Escapella ja kohdistuksen palauttaminen
Tarjotkaa luotettava poistumistapa, joka palauttaa käyttäjän takaisin.
Sulkeminen Escapella ja kohdistuksen palauttaminen on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.
Jokainen modaali-ikkuna tarvitsee poistumistien
Modaali-ikkuna, josta ei pääse pois, on ansa. Käyttäjät odottavat nopeaa ja luotettavaa tapaa sulkea se ilman pienen painikkeen etsimistä.
Escape on yleinen pikanäppäin
Escape-näppäin on sovittu pikanäppäin dialogin sulkemiseen. Näppäimistön ja ruudunlukijan käyttäjät turvautuvat siihen ensin, joten tue sitä aina.
Natiivi dialog käsittelee Escapen
showModal()-metodilla avattu natiivi dialog sulkeutuu Escapella automaattisesti ja laukaisee cancel-tapahtuman, jota voit tarvittaessa kuunnella.
dialog.addEventListener('cancel', onClose);Toteuta Escape itse
Mukautetussa modaali-ikkunassa kuuntele keydown-tapahtumaa ja sulje ikkuna, kun näppäin on Escape. Se vaatii vain muutaman rivin, mutta älä koskaan jätä sitä pois.
if (e.key === 'Escape') closeModal();Muista, missä kohdistus oli
Tallenna kohdistettuna ollut elementti ennen modaali-ikkunan avaamista. document.activeElement on käynnistin, johon palaat myöhemmin.
const opener = document.activeElement;Palauta kohdistus suljettaessa
Kun modaali-ikkuna sulkeutuu, siirrä kohdistus takaisin tallennettuun käynnistimeen. Tämä kohdistuksen palautus tekee sulkemisesta saumattoman.
closeModal();
opener.focus();Miksi palauttaminen on tärkeää
Ilman palautusta kohdistus siirtyy sivun alkuun. Käyttäjä menettää paikkansa ja joutuu sarkaimella takaisin koko matkan. Turhauttavaa ja vältettävissä. 😕
Myös näkyvä sulkemispainike
Escape ei yksin riitä. Tarjoa selkeästi nimetty sulkemispainike, jotta myös hiiren ja kosketusnäytön käyttäjillä on ilmeinen poistumistie.
<button aria-label="Close dialog">×</button>Taustan napsauttaminen
Monet modaali-ikkunat sulkeutuvat myös himmennettyä backdrop-taustaa napsautettaessa. Se on hyvä lisä, mutta se ei saa koskaan korvata Escapea tai painiketta.
Ole varovainen tuhoavien toimien kanssa
Riskialtista toimintoa vahvistavissa dialogeissa voit estää nopean sulkemisen, jotta harhautunut Escape ei ohita tärkeää valintaa.
Testaa koko kierros
Avaa näppäimistöllä, paina Escape ja varmista, että kohdistus palaa täsmälleen siihen käynnistimeen, josta aloitit. Tämä kierros on tavoitteena. ✅
Pikatarkistus
Käyttäjä avaa modaali-ikkunan painikkeesta ja painaa Escapea. Mihin kohdistuksen pitäisi siirtyä?
Kertaus: sulje siististi
Opit tukemaan Escapea, tarjoamaan näkyvän sulkemispainikkeen ja palauttamaan kohdistuksen avaajaan, jotta sulkeminen ei koskaan jätä käyttäjää pulaan. 🎯
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 ”Sulkeminen Escapella ja kohdistuksen palauttaminen” ilmainen?
Kyllä – oppitunnin ”Sulkeminen Escapella ja kohdistuksen palauttaminen” 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 ”Sulkeminen Escapella ja kohdistuksen palauttaminen”?
Tarjotkaa luotettava poistumistapa, joka palauttaa käyttäjän takaisin. 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 3/4.
Kuinka kauan ”Sulkeminen Escapella ja kohdistuksen palauttaminen”-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