Valintaikkunoiden roolit ja natiivi dialog-elementti
Merkitkää kerros aidoksi modaaliseksi valintaikkunaksi.
Valintaikkunoiden roolit ja natiivi dialog-elementti on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Mikä tekee dialogista dialogin
Dialogi on taso, joka keskeyttää sivun pyytääkseen syötettä tai näyttääkseen viestin. Ruudunlukijan käyttäjille on kerrottava, että kyseessä on dialogi eikä vain kelluvaa tekstiä.
div näyttää modaalilta, mutta ei ole sitä
Tyylitelty div voi näyttää ponnahdusikkunalta, mutta avustava teknologia näkee tavallista sisältöä. Ilman oikeaa roolia käyttäjät eivät koskaan saa tietää, että valintaikkuna avautui.
<div class="modal">Are you sure?</div>Tutustu natiiviin dialog-elementtiin
HTML:n dialog-elementti on suunniteltu tähän tehtävään. Se sisältää valmiiksi valintaikkunan semantiikan, joten ruudunlukijat ilmoittavat siitä oikein.
<dialog>Are you sure?</dialog>Avaa se oikeana modaali-ikkunana
Avaa dialog JavaScriptissä oikeana modaali-ikkunana kutsumalla showModal()-metodia. Tällöin sen takana oleva sivu muuttuu passiiviseksi eikä siihen pääse käsiksi.
document.querySelector("dialog").showModal();show() ei ole modaalinen
Huomaa: show() avaa dialogin ei-modaalisena, joten taustalla oleva sivu säilyy käytettävissä. Estävään valintaikkunaan tarvitaan showModal().
dialog.show();dialog-roolin tausta
Konepellin alla elementti yhdistyy dialog-rooliin. Jos dialog on rakennettava div-elementistä, merkityksen sille antaa role="dialog"-attribuutti.
<div role="dialog">Settings</div>alertdialog kiireellisiin valintoihin
Kun valintaikkuna edellyttää vastausta, esimerkiksi poiston vahvistamista, käytä role="alertdialog"-roolia. Se ilmaisee avustavalle teknologialle tilanteen erityisen kiireellisyyden.
<div role="alertdialog">Delete this file?</div>Jokainen dialog tarvitsee nimen
Dialogilla täytyy olla saavutettava nimi, jotta käyttäjät tietävät sen tarkoituksen avautuessaan. Osoita aria-labelledby sen sisältämään otsikkoon.
<dialog aria-labelledby="t"><h2 id="t">Confirm</h2></dialog>Sulje se koodissa
Natiivi elementti tarjoaa vastaavan close()-metodin. Sen kutsuminen sulkee dialogin ja tekee taustalla olevasta sivusta jälleen saavutettavan.
dialog.close();Sisäänrakennettu tausta
Modaalinen dialog saa automaattisesti backdrop-taustan, jota voi tyylitellä ::backdrop-pseudoelementillä. Se himmentää sivun ja ilmaisee kohdistuksen siirtyneen.
dialog::backdrop { background: rgba(0,0,0,0.5); }Miksi natiivi ratkaisu säästää työtä
Natiivi dialog huolehtii puolestasi kohdistuksesta, Escapesta ja taustan tekemisestä passiiviseksi. Sen käyttäminen tarkoittaa vähemmän virheitä kuin itse rakennetun div-elementin käyttäminen.
Pikatarkistus
Haluat vahvistusponnahdusikkunan, joka estää sivun käytön, kunnes käyttäjä vastaa. Mitä kutsua pitäisi käyttää?
Kertaus: käytä oikeita dialogeja
Opit, että modaali-ikkuna tarvitsee dialog-semantiiikan. Suosi natiivia dialogia ja showModal()-metodia, anna sille nimi ja käytä alertdialog-roolia kiireellisiin valintoihin.
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 ”Valintaikkunoiden roolit ja natiivi dialog-elementti” ilmainen?
Kyllä – oppitunnin ”Valintaikkunoiden roolit ja natiivi dialog-elementti” 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 ”Valintaikkunoiden roolit ja natiivi dialog-elementti”?
Merkitkää kerros aidoksi modaaliseksi valintaikkunaksi. 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 1/4.
Kuinka kauan ”Valintaikkunoiden roolit ja natiivi dialog-elementti”-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