Създайте Достъпни Модални Windows с A11y Dialog

Modals широко се поддържат в модерни браузъри. Те могат да се използват като изскачащи прозорци за известяване, като полета за включване, или дори за фото слайдшоута.

Можете да изградите тези прозорци с помощта на чист CSS но това не е най-достъпното решение. Вместо това проверете Диалогов прозорец A11y, напълно функциониращ модален прозорец, върху който се фокусира достъпност на първо място.

Той се изпълнява ванилия JavaScript с неговите собствен потребителски API и поддържа всички модерни браузъри на всички устройства. Можете да проверите тази демонстрация за да видим как изглежда в действие.

Той изглежда много подобен на типичен модален прозорец. Но този сценарий използва маркери ARIA да поддържа модерна достъпност за всички потребители.

По подразбиране също A11y Dialog поддържа сензорни екрани, така че докосването има същия ефект като кликване. Можете да щракнете или да натиснете навсякъде извън прозореца, за да го затворите, или на компютъра натиснете клавиша ESC.

Някак си тази библиотека е доста малка, само 1.2kb, включително всички CSS и JS код. Това го прави лек на върха на напълно достъпни.

Можете да научите повече, като прочетете чрез GitHub репо и Диалоговият прозорец A11y има своя собствена страница за документация, също. Това включва и раздел в инсталиране и настройка за начинаещи. Има и дълъг раздел, покриващ DOM API за добавяне на бутони към страницата ви, която може да отваря (или да затваря) модалния прозорец.

Ако се опитвате изграждане на по-достъпни уебсайтове сериозно да обмислите пускането на A11y Dialog във вашите проекти. Можеш получите изходния код от GitHub или да го изтеглите от мениджър на пакети като npm или Bower.

Разгледайте главната страница, за да научите повече за настройките и основните функции на JavaScript. Тази библиотека идва много повече от достъпността на ARIA, затова си струва да проверите дали искате да разширите функциите на вашите модални прозорци.