Tarkista, että modaalit ovat näppäimistöllä käytettävissä
Varmista, että Tab-navigointi ei hyppää modaalin ulkopuolelle, kun se on auki:
- Paina Enter avataksesi modaalin (esim. painike).
- Siirry Tab-näppäimellä modaalin sisällä olevien elementtien läpi.
- Kokeile painaa ESC-näppäintä varmistaaksesi, että modaali sulkeutuu. Jos ei sulkeudu, seuraa alla olevia ohjeita.
Saavutettavat modaali-komponentit
Yleinen tapa rakentaa modaali Webflow’ssa:
- Button-elementti on suora sisarus modaalin pääelementille.
- Interaktio asetetaan painikkeeseen niin, että modal-wrapper näkyy, kun painiketta klikataan.
- Lisää tarvittavat ARIA-attribuutit painikkeeseen, modaaliin ja sen lapsielementteihin.
- Käytä mukautettua koodia, jotta:
- Käyttäjän fokus pysyy modaalin sisällä
- Modaali voidaan sulkea ESC-näppäimellä
Mukautetut attribuutit modaaleille
Voit lisätä mukautettuja attribuutteja Webflow Universityn ohjeiden mukaan: Custom Attributes
Suositellut attribuutit:
Modaalin avaava painike
role="button"
Modaalin wrapper elementti
role="dialog"aria-modal="true"aria-labelledby="Popup Modal"
Modaalin sulkeva painike
role="button"
Modaalin ulkopuolinen alue jota klikkaamalla myös modaali su
tabindex="-1"aria-hidden="true"
Näiden attribuuttien avulla ruudunlukijat ja muut apuvälineet voivat tulkita modaalin tilan ja toiminnallisuuden oikein.