Kohdistuksen palauttaminen kerroksen sulkeutuessa
Palauttakaa käyttäjä siihen kohtaan, jossa hän oli.
Kohdistuksen palauttaminen kerroksen sulkeutuessa 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.
Kerrokselliset käyttöliittymät lainaavat kohdistuksen
Kun modaali, valikko tai vetolaatikko avautuu, kohdistus siirtyy sen sisään. Kun se sulkeutuu, teidän on vastuullanne palauttaa kohdistus käyttäjän aiempaan sijaintiin.
Kadonneen kohdistuksen ongelma
Jos suljettu kerros jättää kohdistuksen poistettuun elementtiin, kohdistus palautuu sivun body-elementtiin. Käyttäjä jää jumiin ilman käsitystä sijainnistaan.
Muistakaa käynnistäjä
Korjaus alkaa ennen avaamista: tallentakaa viite elementtiin, joka käynnisti kerroksen, yleensä document.activeElementiin.
const trigger = document.activeElement;Palauttakaa kohdistus suljettaessa
Kun kerros sulkeutuu, kutsukaa focus()-metodia tallennetussa käynnistäjässä, jotta käyttäjä palaa täsmälleen lähtökohtaansa.
trigger.focus();Koko edestakainen kulku
Avatkaa: tallentakaa käynnistäjä ja kohdistakaa kerrokseen. Sulkekaa: piilottakaa kerros ja palauttakaa kohdistus käynnistäjään. Tämä silmukka on jokaisen suljettavan kerroksen kohdistussopimus. 🔁
Natiivi dialog auttaa
Selaimen dialog-elementti palauttaa kohdistuksen avaajaan automaattisesti, kun kutsutte close()-metodia, joten manuaalista kirjanpitoa ei tarvita.
myDialog.close();Käsitelkää jokainen poistumistapa
Palauttakaa kohdistus riippumatta siitä, miten kerros sulkeutuu: Sulje-painikkeen, Escape-näppäimen ja taustan napsautuksen pitäisi kaikkien palauttaa käyttäjä.
Kun käynnistäjä on poissa
Jos käynnistäjä poistettiin kerroksen ollessa auki, siirtäkää kohdistus sen sijaan järkevään lähellä olevaan elementtiin, ei koskaan tyhjyyteen.
Miksi tämä on niin tärkeää
Hiirellä liikkuvat näkevät käyttäjät tuskin huomaavat asiaa, mutta näppäimistö- ja ruudunlukijakäyttäjille puuttuva kohdistuksen palautus voi tehdä ominaisuudesta käyttökelvottoman.
Testatkaa vain näppäimistöllä
Avatkaa kerros Enter-näppäimellä, sulkekaa se Escapella ja varmistakaa, että kohdistuskehys ilmestyy uudelleen kerroksen avanneeseen painikkeeseen.
Tehkää siitä tapa
Käsitelkää kohdistuksen palautusta minkä tahansa peittokerroksen rakentamisen osana, ei jälkikäteen lisättävänä asiana. Toteuttakaa se heti, kun lisäätte avaus- ja sulkemislogiikan.
Pikatarkistus
Mukautettu modaali sulkeutuu. Mihin kohdistuksen pitäisi siirtyä?
Kertaus
Nyt osaatte sulkea silmukan: tallentakaa käynnistäjä avattaessa, palauttakaa kohdistus siihen jokaisella sulkemistavalla ja hyödyntäkää natiivia dialog-elementtiä aina kun mahdollista. 🎯
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 palauttaminen kerroksen sulkeutuessa” ilmainen?
Kyllä – oppitunnin ”Kohdistuksen palauttaminen kerroksen sulkeutuessa” 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 palauttaminen kerroksen sulkeutuessa”?
Palauttakaa käyttäjä siihen kohtaan, jossa hän oli. 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 ”Kohdistuksen palauttaminen kerroksen sulkeutuessa”-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
- tabindex 0, -1 ja ei koskaan positiivinen
- Kohdistuksen siirtäminen toiminnon jälkeen
- Kohdistuksen palauttaminen kerroksen sulkeutuessa
- Siirtyvän tabindex-arvon hallinta widgeteissä