Функции плагина:
- Определение контрастности текстовых элементов и элементов, которые могут содержать текст (например input, textarea);
- Определение размера шрифта и предупреждение, если он является слишком маленьким;
- Определение наличия атрибутов alt, aria-label, title там, где это необходимо;
- Определение наличия выделения фокусируемых элементов при фокусе (таких как button, a, input).
Преимущества плагина:
- с его помощью можно быстро просканировать всю страницу и выделить элементы, для которых необходимо повысить доступность - это удобно при разработке страниц интернет-магазинов с большим количеством элементов, для каждого из которых необходимо соблюдать необходимые условия веб-доступности;
- для каждого элемента генерируется описание с обнаруженными проблемами и предлагаются варианты их решения;
- для всей страницы генерируется отчет, включающий в себя сводную диаграмму доступности и общий вывод;
- его легко интегрировать в проекты на React и других фреймворках, а также в проекты на нативном js;
- этот плагин легко развивать и масштабировать, добавлять новые функции и критерии определения доступности для различных элементов.
Этот плагин имеет простой функционал и простую иерарахию статуса веб-доступности элементов:
- okAll - выделение темно-зеленым - элемент соотвествует уровню AAA WCAG;
- ok - выделение светло-зеленым - элемент соотвествует уровню AA WCAG;
- warning - выделение оранжевым - элемент не соотвествует уровню AA WCAG;
- danger- выделение красным - элемент не соотвествует уровню A WCAG.
Ссылка на npm: https://www.npmjs.com/package/web-accessibility-checker
Ссылка на Github: https://github.com/Alice8080/web-accessibility-checker