Construiți ferestre modale accesibile cu dialogul A11y

modals sunt larg acceptate în browserele moderne. Ele pot fi folosite ca ferestre de notificare, la fel de opt-in câmpuri, sau chiar pentru prezentări de fotografii.

Puteți construi aceste ferestre utilizând CSS pur dar aceasta nu este soluția cea mai accesibilă. În schimb, verificați Dialogul A11y, o fereastră modală pe deplin funcțională care pune accentul pe accesibilitatea.

Se execută vanilla JavaScript cu al ei; cu al lui propriul API personalizat și acceptă toate browserele moderne de pe toate dispozitivele. Puteți verifica acest demo pentru a vedea cum arată în acțiune.

Se pare ca o fereastră modală tipică. Dar, acest scenariu utilizează etichetele ARIA pentru a sprijini accesul modern pentru toți utilizatorii.

În mod implicit, dialogul A11y de asemenea suportă touchscreens, astfel încât atingerea are același efect ca și clicul. Puteți să faceți clic sau să atingeți oriunde în afara ferestrei pentru al închide sau pe un computer să apăsați tasta ESC.

Cumva, această bibliotecă este destul de mică, doar 1.2kb, inclusiv toate codurile CSS și JS. Acest lucru face ușor pe partea de sus de pe deplin accesibile.

Puteți afla mai multe prin citirea prin GitHub repo și dialogul A11y are pagina de documentare proprie, de asemenea. Aceasta include o secțiune pe instalare și configurare pentru începători complet. Există, de asemenea, o secțiune lungă care acoperă DOM API pentru adăugarea butoanelor la pagina care poate deschide (sau închide) fereastra modală.

Dacă încercați construi site-uri mai accesibile Luați în considerare în mod serios rularea dialogului A11y în proiectele dvs. Poti obțineți codul sursă de la GitHub sau descărcați-l de la un manager de pachete, cum ar fi npm sau Bower.

Uitați-vă la pagina principală pentru a afla mai multe despre configurarea și caracteristicile JavaScript de bază. Această bibliotecă vine cu mult mai mult decât accesibilitatea ARIA, deci merită testarea dacă doriți să extindeți funcțiile ferestrelor modale.