Zbuduj dostępne modalne okna z A11y Dialog

Modały są powszechnie obsługiwane w nowoczesnych przeglądarkach. Mogą być używane jako okienka powiadomień, tak jak pola wyboru, lub nawet dla pokazy slajdów.

Możesz zbudować te okna używając czysty CSS ale to nie jest najbardziej dostępne rozwiązanie. Zamiast tego sprawdź A11y Dialog, w pełni funkcjonalne okno modalne, które skupia uwagę dostępność pierwsza.

Działa dalej waniliowy JavaScript z jego własny niestandardowy interfejs API i obsługuje wszystkie nowoczesne przeglądarki na wszystkich urządzeniach. Możesz sprawdzić to demo aby zobaczyć, jak to wygląda w akcji.

Wygląda to jak typowe okno modalne. Ale ten skrypt używa tagów ARIA wspierać nowoczesną dostępność dla wszystkich użytkowników.

Domyślnie również A11y Dialog obsługuje ekrany dotykowe, więc stukanie ma taki sam efekt jak kliknięcie. Możesz kliknąć lub stuknąć w dowolnym miejscu poza oknem, aby je zamknąć, lub na komputerze nacisnąć klawisz ESC.

Jakoś ta biblioteka jest dość mała, tylko 1,2kb, w tym cały kod CSS i JS. To sprawia, że ​​jest lekki na szczycie w pełni dostępny.

Możesz dowiedzieć się więcej, czytając Repo GitHub a A11y Dialog ma swój własna strona dokumentacji, zbyt. Obejmuje to sekcję instalacja i konfiguracja dla początkujących. Jest też długa sekcja obejmująca DOM API do dodawania przycisków na swojej stronie, która może otworzyć (lub zamknąć) okno modalne.

Jeśli próbujesz budować bardziej dostępne strony internetowe poważnie rozważyć uruchomienie Dialogu A11y w swoich projektach. Możesz pobierz kod źródłowy z GitHub lub pobierz go z menedżera pakietów, takiego jak npm lub Bower.

Spójrz na stronę główną, aby dowiedzieć się więcej o konfiguracji i podstawowych funkcjach JavaScript. Ta biblioteka pochodzi z o wiele więcej niż dostępność ARIA, więc warto przetestować, jeśli chcesz rozszerzyć funkcje okien modalnych.