Проверяйте доступность вашего приложения Angular с помощью codelyzer

Хотите сделать свой сайт Angular доступным для всех? Это подходящее место!

Минко Гечев
Зама Хан Мохаммед

Обеспечение доступности вашего приложения означает, что все пользователи, в том числе люди с особыми потребностями, смогут использовать его и понимать контент. Согласно Всемирному докладу о состоянии здравоохранения , более миллиарда человек — около 15% населения мира — имеют ту или иную форму инвалидности. Поэтому доступность является приоритетом для любого девелоперского проекта.

В этом посте вы узнаете, как добавить проверки доступности codelyzer в процесс сборки приложения Angular. Этот подход позволяет выявлять ошибки специальных возможностей непосредственно в текстовом редакторе во время написания кода.

Использование codelyzer для обнаружения недоступных элементов

codelyzer — это инструмент, который находится поверх TSLint и проверяет, следуют ли проекты Angular TypeScript набору правил проверки. Проекты, настроенные с помощью интерфейса командной строки Angular (CLI), по умолчанию включают codelyzer.

codelyzer имеет более 50 правил для проверки того, соответствует ли приложение Angular лучшим практикам. Из них существует около 10 правил обеспечения соблюдения критериев доступности. Чтобы узнать о различных проверках доступности, предоставляемых codelyzer, и их обосновании, см. статью «Новые правила доступности в Codelyzer» .

В настоящее время все правила доступности являются экспериментальными и по умолчанию отключены. Вы можете включить их, добавив в файл конфигурации TSLint ( tslint.json ):

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint работает со всеми популярными текстовыми редакторами и IDE. Чтобы использовать его с VSCode, установите плагин TSLint . В WebStorm TSLint включен по умолчанию. Для других редакторов проверьте README TSLint.

После настройки проверок доступности codelyzer вы получаете всплывающее окно, показывающее ошибки доступности в файлах TypeScript или встроенных шаблонах во время кода:

Скриншот всплывающего окна codelyzer в текстовом редакторе.
Всплывающее окно codelyzer, показывающее ошибку маркировки элемента формы.

Чтобы выполнить линтинг всего проекта (включая внешние шаблоны), используйте команду ng lint :

Линтинг с помощью Angular CLI

Дополняющий коделизатор

Lighthouse — это еще один инструмент, который вы можете использовать для обеспечения соблюдения специальных возможностей в вашем приложении Angular. Основное различие между codelyzer и Lighthouse заключается в том, когда выполняются их проверки. Codelyzer статически анализирует приложение во время разработки, не запуская его. Это означает, что во время разработки вы можете получать прямую обратную связь в текстовом редакторе или в терминале. Напротив, Lighthouse фактически запускает ваше приложение и выполняет ряд проверок с использованием динамического анализа.

Оба инструмента могут быть полезными в процессе разработки. Lighthouse имеет лучшее покрытие, учитывая выполняемые им проверки, а codelyzer позволяет выполнять итерации быстрее, получая постоянную обратную связь в текстовом редакторе.

Обеспечение проверок доступности в вашей непрерывной интеграции

Внедрение статических проверок доступности в вашу непрерывную интеграцию (CI) может значительно улучшить процесс разработки. С помощью codelyzer вы можете легко обеспечить соблюдение определенных правил доступности или других методов, запуская ng lint при каждой модификации кода (например, для каждого нового запроса на извлечение).

Таким образом, еще до того, как вы приступите к проверке кода, ваш CI сможет сообщить вам, есть ли какие-либо нарушения доступности.

Заключение

Чтобы улучшить доступность вашего приложения Angular:

  1. Включите экспериментальные правила доступности в codelyzer.
  2. Выполните анализ доступности для всего проекта с помощью Angular CLI.
  3. Исправьте все проблемы доступности, о которых сообщил codelyzer.
  4. Рассмотрите возможность использования Lighthouse для аудита доступности во время выполнения.