Хотите сделать свой 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 или встроенных шаблонах: