• Hackathons
  • Features
  • Blog

Web accessibility checker

Плагин для определения веб-доступности элементов.

  • 806 Raised
  • 8 Views
  • 1 Juries

Gallery

Description

Функции плагина:

  • Определение контрастности текстовых элементов и элементов, которые могут содержать текст (например input, textarea);
  • Определение размера шрифта и предупреждение, если он является слишком маленьким;
  • Определение наличия атрибутов alt, aria-label, title там, где это необходимо;
  • Определение наличия выделения фокусируемых элементов при фокусе (таких как button, a, input).

Преимущества плагина:

  • с его помощью можно быстро просканировать всю страницу и выделить элементы, для которых необходимо повысить доступность - это удобно при разработке страниц интернет-магазинов с большим количеством элементов, для каждого из которых необходимо соблюдать необходимые условия веб-доступности;
  • для каждого элемента генерируется описание с обнаруженными проблемами и предлагаются варианты их решения;
  • для всей страницы генерируется отчет, включающий в себя сводную диаграмму доступности и общий вывод;
  • его легко интегрировать в проекты на React и других фреймворках, а также в проекты на нативном js;
  • этот плагин легко развивать и масштабировать, добавлять новые функции и критерии определения доступности для различных элементов.

Этот плагин имеет простой функционал и простую иерарахию статуса веб-доступности элементов:

  1. okAll - выделение темно-зеленым - элемент соотвествует уровню AAA WCAG;
  2. ok - выделение светло-зеленым - элемент соотвествует уровню AA WCAG;
  3. warning - выделение оранжевым - элемент не соотвествует уровню AA WCAG;
  4. danger- выделение красным - элемент не соотвествует уровню A WCAG.


Ссылка на npm: https://www.npmjs.com/package/web-accessibility-checker 

Ссылка на Github: https://github.com/Alice8080/web-accessibility-checker