Sukurkite prieinamus modalinius langus su A11y dialogu

Modalai yra plačiai palaikomos šiuolaikinėse naršyklėse. Jie gali būti naudojami kaip pranešimų langai, kaip pasirinkimo laukai, arba netgi nuotraukų skaidrių demonstravimas.

Šiuos langus galite sukurti naudodami grynas CSS tačiau tai nėra pats tinkamiausias sprendimas. Vietoj to, patikrinkite A11y dialogas, visiškai veikiantis modalinis langas, kuriame pagrindinis dėmesys skiriamas prieinamumą.

Jis veikia vanilės „JavaScript“ su savo savo pasirinktinę API ir palaiko visas modernias naršykles visuose įrenginiuose. Galite patikrinti ši demonstracija pamatyti, kaip jis veikia.

Tai panašu į tipišką modalinį langą. Tačiau šis scenarijus naudoja ARIA žymes remti šiuolaikinį prieinamumą visiems vartotojams.

Pagal numatytuosius nustatymus taip pat yra A11y dialogas palaiko jutiklinius ekranus, todėl bakstelėjimas turi tą patį poveikį kaip ir paspaudimas. Galite spustelėti arba bakstelėti bet kur už lango, kad jį uždarytumėte, arba kompiuteryje paspauskite ESC klavišą.

Kažkaip ši biblioteka yra gana maža, tik 1.2kb, įskaitant visus CSS ir JS kodus. Dėl to jis lengvai pasiekiamas visiškai prieinamoje vietoje.

Daugiau galite sužinoti skaitydami GitHub repo ir A11y dialogas turi savo savo dokumentacijos puslapį, taip pat. Tai apima skyrių diegimas ir nustatymas pilniems pradedantiesiems. Taip pat yra ilgas skyrius, apimantis DOM API, skirta pridėti mygtukus į savo puslapį, kuris gali atidaryti (arba uždaryti) modalinį langą.

Jei bandote kurti labiau prieinamas svetaines rimtai apsvarstyti galimybę savo projektuose vykdyti A11y dialogą. Tu gali gauti šaltinio kodą iš „GitHub“ arba atsisiųskite ją iš paketo tvarkyklės, pvz., „npm“ arba „Bower“.

Pažvelkite į pagrindinį puslapį, kad sužinotumėte daugiau apie „Setup“ ir pagrindines „JavaScript“ funkcijas. Ši biblioteka yra daug daugiau nei ARIA prieinamumas, todėl verta išbandyti, jei norite išplėsti savo modalinių langų funkcijas.