Bygga Tillgängliga Modal Windows med A11y Dialog

modals stöds allmänt i moderna webbläsare. De kan användas som meddelande popup-fönster, som opt-in fält, eller till och med för bildspel.

Du kan bygga dessa fönster med ren CSS men det här är inte den mest tillgängliga lösningen. I stället kolla in A11y Dialog, ett fullt fungerande modalfönster som lägger fokus på tillgänglighet först.

Det går vidare Vanilla JavaScript med dess egen anpassad API och stöder alla moderna webbläsare över alla enheter. Du kan kolla in den här demo för att se hur det ser ut i åtgärd.

Det verkar som ett typiskt modalfönster. Men det här skriptet använder ARIA-taggar för att stödja modern tillgänglighet för alla användare.

Som standard är A11y Dialog också stöder pekskärmar, så tappning har samma effekt som att klicka på. Du kan klicka eller knacka någonstans utanför fönstret för att stänga det eller på en dator på ESC-tangenten.

På något sätt är det här biblioteket ganska litet, bara 1,2kb, inklusive alla CSS och JS-koden. Detta gör det lättare än fullt tillgängliga.

Du kan lära dig mer genom att läsa igenom GitHub repo och A11y Dialog har sin egen dokumentationssida, för. Detta inkluderar en sektion på installation och installation för fullständiga nybörjare. Det finns också en lång sektion som täcker DOM API för att lägga till knappar till din sida som kan öppna (eller stänga) det modala fönstret.

Om du försöker bygga mer tillgängliga webbplatser seriöst överväga att köra A11y Dialog i dina projekt. Du kan få källkoden från GitHub eller hämta den från en pakethanterare som npm eller Bower.

Ta en titt på huvudsidan för att lära dig mer om installationen och grundläggande JavaScript-funktioner. Detta bibliotek kommer med mycket mer än ARIA-tillgänglighet, så det är värt att testa om du vill expandera funktionerna i dina modala fönster.