Rakenna esteettömät modaalit Windows A11y-valintaikkunalla
modals tuetaan laajasti nykyaikaisissa selaimissa. Niitä voidaan käyttää ilmoitusikkunat, kuten opt-in -kentät, tai jopa kuvaesityksiä.
Voit rakentaa nämä ikkunat käyttämällä puhdas CSS mutta tämä ei ole helpoin ratkaisu. Tarkista sen sijaan A11y-valintaikkuna, täysin toimiva modaali-ikkuna, jossa keskitytään saavutettavuus.
Se toimii vanilja JavaScript sen kanssa oma mukautettu sovellusliittymä ja tukee kaikkia nykyaikaisia selaimia kaikissa laitteissa. Voit tarkistaa tämä demo nähdä, miten se toimii.
Se näyttää olevan tyypillinen modaalinen ikkuna. Mutta tämä käsikirjoitus käyttää ARIA-tunnisteita tukemaan nykyaikaista saatavuutta kaikille käyttäjille.
Oletuksena on myös A11y-valintaikkuna tukee kosketusnäyttöjä, joten napauttamalla on sama vaikutus kuin napsautuksella. Sulje se napsauttamalla tai napauttamalla mitä tahansa ikkunan ulkopuolella tai tietokoneessa osuu ESC-näppäimeen.
Jotenkin tämä kirjasto on melko pieni, vain 1.2kb, mukaan lukien kaikki CSS- ja JS-koodit. Tämä tekee siitä helpon ja täydellisen saatavilla.
Voit oppia lisää lukemalla GitHub repo ja A11y-valintaikkunassa on omaa dokumentointisivua, liian. Tämä sisältää osion asennus ja asennus täydellinen aloittelija. On myös pitkä osa, joka kattaa DOM-sovellusliittymä painikkeiden lisäämiseen sivulle, joka voi avata (tai sulkea) modaalin ikkunan.
Jos yrität rakentaa helpommin saatavilla olevia verkkosivustoja harkitse vakavasti A11y-valintaikkunan käyttöä projekteissa. Sinä pystyt saat lähdekoodin GitHubista tai lataa se paketinhallinnasta, kuten npm tai Bower.
Tutustu pääsivulle, kun haluat lisätietoja JavaScript-perusasetuksista. Tämä kirjasto tulee paljon enemmän kuin ARIA-saavutettavuus, joten kannattaa testata, jos haluat laajentaa modaalisten ikkunoiden ominaisuuksia.
