Looge ligipääsetavaid modaale Windows A11y dialoogiga

Modaalid on tänapäeva brauserites laialdaselt toetatud. Neid saab kasutada kui teate hüpikaknad, nagu opt-in väljad, või isegi foto slaidiseansid.

Neid aknaid saab ehitada kasutades puhas CSS kuid see ei ole kõige kättesaadavam lahendus. Selle asemel vaadake A11y dialoog, täielikult toimiv modaalaken, mis keskendub esmalt juurdepääsetavust.

See töötab vanilli JavaScript oma oma kohandatud API ja toetab kõiki kaasaegseid brausereid kõigis seadmetes. Võite vaadata see demo näha, kuidas see toimib.

Tundub, et see on tüüpiline modaalne aken. Aga see skript kasutab ARIA silte toetada kaasaegset juurdepääsu kõigile kasutajatele.

Vaikimisi on ka A11y dialoog toetab puuteekraane, nii et koputamisel on sama mõju kui klõpsamisel. Selle sulgemiseks võite klõpsata või koputada ükskõik kus väljaspool akent või arvutis vajutada ESC klahvi.

Kuidagi on see raamatukogu üsna väike, ainult 1.2kb, kõik CSS- ja JS-koodid. See muudab selle kergesti kättesaadavaks täielikult ligipääsetavale.

Lisateavet saate läbi lugedes GitHub repo ja A11y Dialogil on oma oma dokumentatsiooni leht, ka. See hõlmab ka jaotist installimine ja seadistamine täielikele algajatele. Seal on ka pikk sektsioon, mis katab DOM-i API nuppude lisamiseks lehele, mis võib avada (või sulgeda) modaalakna.

Kui üritate luua paremini kättesaadavaid veebisaite tõsiselt kaaluda oma projektides A11y dialoogi käivitamist. Sa saad saada lähtekoodi GitHubist või laadige see pakettide haldurist, näiteks npm või Bower.

Vaadake põhilehelt, et saada rohkem teavet seadistamise ja põhiliste JavaScript-funktsioonide kohta. See raamatukogu kaasas palju rohkem kui ARIA juurdepääsetavus, seega tasub katsetada, kui soovite oma modaalsete akende funktsioone laiendada.