Izveidot pieejamu modālu Windows ar A11y dialogu

Modāli mūsdienīgās pārlūkprogrammās tiek plaši atbalstītas. Tos var izmantot kā paziņojumu logi, kā izvēles lauki, vai pat foto slīdrādes.

Jūs varat veidot šos logus, izmantojot tīra CSS bet tas nav vispieejamākais risinājums. Tā vietā pārbaudiet A11y dialogs, pilnībā funkcionējošu modālu logu, kas koncentrē uzmanību vispirms pieejamība.

Tā darbojas vaniļas JavaScript ar to sava pielāgotā API un atbalsta visas modernās pārlūkprogrammas visās ierīcēs. Jūs varat pārbaudīt šī demo lai redzētu, kā tas darbojas.

Tas izskatās kā tipisks modāls. Bet, šis skripts izmanto ARIA tagus atbalstīt mūsdienīgu pieejamību visiem lietotājiem.

Pēc noklusējuma ir arī A11y dialogs atbalsta skārienekrānus, tā pieskaršanās ir tāda pati iedarbība kā noklikšķinot. Jūs varat noklikšķināt vai pieskarties jebkurā vietā ārpus loga, lai to aizvērtu, vai arī datorā nospiediet ESC taustiņu.

Kaut kā šī bibliotēka ir diezgan maza, tikai 1.2kb, ieskaitot visus CSS un JS kodus. Tas padara to par vieglu un pilnībā pieejamu.

Jūs varat uzzināt vairāk, lasot caur GitHub repo un A11y Dialog ir savs pašu dokumentācijas lapu, arī. Tas ietver sadaļu par instalēšana un iestatīšana pilniem iesācējiem. Ir arī garš posms, kas aptver DOM API, lai pievienotu pogas uz jūsu lapu, kas var atvērt (vai aizvērt) modālo logu.

Ja jūs mēģināt veidot pieejamākas tīmekļa vietnes nopietni apsveriet iespēju A11y Dialog jūsu projektos. Jūs varat iegūt avota kodu no GitHub vai lejupielādējiet to no iepakojuma pārvaldnieka, piemēram, npm vai Bower.

Iepazīstieties ar galveno lapu, lai uzzinātu vairāk par iestatīšanas un pamata JavaScript funkcijām. Šī bibliotēka nāk ar daudz vairāk nekā ARIA pieejamība, tāpēc ir vērts pārbaudīt, vai vēlaties paplašināt modālo logu funkcijas.