Хотите сделать свой 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 или встроенных шаблонах:
Для проверки синтаксиса всего проекта (включая внешние шаблоны) используйте команду ng lint :
Дополнение коделизатора
Lighthouse — ещё один инструмент, который можно использовать для обеспечения доступности в вашем Angular-приложении. Основное различие между Codelyzer и Lighthouse заключается в способе выполнения проверок. Codelyzer статически анализирует приложение во время разработки, не запуская его. Это означает, что во время разработки вы можете получать прямую обратную связь в текстовом редакторе или в терминале. В отличие от него, Lighthouse фактически запускает ваше приложение и выполняет ряд проверок с помощью динамического анализа.
Оба инструмента могут быть полезными частями вашего процесса разработки. Lighthouse обеспечивает более широкое покрытие благодаря выполняемым проверкам, а Codelyzer позволяет быстрее вносить изменения, получая постоянную обратную связь в текстовом редакторе.
Внедрение проверок доступности в вашу систему непрерывной интеграции
Внедрение статических проверок доступности в вашу систему непрерывной интеграции (CI) может значительно улучшить ваш процесс разработки. С помощью Codelyzer вы можете легко обеспечить соблюдение определенных правил доступности или других практик, запуская команду ng lint при каждом изменении кода (например, при каждом новом запросе на слияние).
Таким образом, еще до начала проверки кода ваша система непрерывной интеграции сможет сообщить вам о любых нарушениях доступности.
Заключение
Для повышения доступности вашего Angular-приложения:
- Включите экспериментальные правила доступности в Codelyzer.
- Выполните проверку доступности всего проекта с помощью Angular CLI.
- Исправлены все проблемы с доступностью, о которых сообщила программа Codelyzer.
- Рекомендуется использовать Lighthouse для проведения аудита доступности во время выполнения программы.