Улучшить эту страницуДоступность с ngAria

Цель ngAria — улучшить стандартную доступность Angular, включив общие атрибуты ARIA, которые передают состояние или семантическую информацию для вспомогательных технологий, используемых людьми с ограниченными возможностями.

Использование ngAria

Использование ngAria так же просто, как подключение модуля ngAria в ваше приложение. ngAria подключается к стандартным директивам AngularJS и тихо встраивает поддержку доступности в ваше приложение во время выполнения.

angular.module('myApp', ['ngAria'])...

Использование ngAria

Большая часть работы ngAria скрыта «под капотом». Чтобы увидеть модуль в действии, после добавления его в качестве зависимости, вы можете проверить несколько вещей:

• Используя ваш любимый инструмент инспекции элементов, найдите атрибуты ngAria в собственном коде.
• Протестируйте использование клавиатуры, чтобы убедиться, что tabindex используется правильно.
• Запустите программу чтения с экрана, например VoiceOver, чтобы послушать поддержку ARIA. Полезные советы по тестированию с программами чтения с экрана.

Поддерживаемые директивы

В настоящее время ngAria взаимодействует со следующими директивами:

• ngModel
• ngDisabled
• ngShow
• ngHide
• ngClick
• ngDblClick
• ngMessages

ngModel

Большая часть работы ngAria выполняется в директиве ngModel. Для элементов, использующих ngModel, ngAria уделяет особое внимание, если этот элемент также имеет роль или тип checkbox, radio, range или textbox.

Для элементов, использующих ngModel, ngAria будет динамически связывать и обновлять следующие атрибуты ARIA (если они не были явно указаны разработчиком):

• aria-checked
• aria-valuemin
• aria-valuemax
• aria-valuenow
• aria-invalid
• aria-required

ngAria также добавит tabIndex, гарантируя, что пользователь сможет получить доступ к пользовательским элементам с этими ролями с помощью клавиатуры. Вам, как разработчику, все равно необходимо убедиться, что пользовательские элементы можно использовать с клавиатурой. Подумайте о ng-click на <div> или <md-checkbox>: вам по-прежнему необходимо привязать ng-keypress, чтобы сделать элемент полностью управляемым с помощью клавиатуры. Как правило, каждый раз, когда вы создаете виджет с взаимодействием пользователя, обязательно протестируйте его с помощью клавиатуры и по крайней мере одной программы чтения с экрана для мобильных и настольных компьютеров (желательно больше).

ngDisabled

Атрибут disabled допустим только для определенных элементов, таких как button, input и textarea. Чтобы корректно отключить пользовательские директивы элементов, такие как <md-checkbox> или <taco-tab>, использование ngAria с ngDisabled также добавит aria-disabled. Это сообщает вспомогательным технологиям, когда нестандартный элемент управления отключен, помогая сделать пользовательские элементы более доступными.

<md-checkbox ng-disabled="disabled">

Преобразуется в:

<md-checkbox disabled aria-disabled="true">

Вы можете проверить, действительно ли элемент управления отключен для программы чтения с экрана, посетив chrome://accessibility.

ngShow

Директива ngShow отображает или скрывает указанный HTML-элемент на основе выражения, предоставленного атрибуту ngShow. Элемент отображается или скрывается путем удаления или добавления класса .ng-hide к элементу.

В стандартной настройке ngAria для ngShow фактически избыточна. Она переключает aria-hidden на директиве при скрытии или отображении. Однако стандартный CSS display: none !important уже скрывает дочерние элементы для программы чтения с экрана. Она становится более полезной, когда стандартный CSS переопределяется свойствами, которые не влияют на вспомогательные технологии, такими как opacity или transform. Динамическое переключение aria-hidden с помощью ngAria гарантирует, что содержимое, визуально скрытое таким способом, не будет прочитано вслух программой чтения с экрана.

Важно учитывать, что при таком сочетании CSS и aria-hidden, вы также должны удалить ссылки и другие интерактивные дочерние элементы из порядка табуляции, используя tabIndex=“-1” для каждого элемента управления. Это гарантирует, что пользователи программ чтения с экрана случайно не сфокусируются на «загадочных элементах». Управление индексом табуляции для каждого дочернего элемента управления может быть сложным и повлиять на производительность, поэтому лучше использовать стандартный display: none CSS. См. четвертое правило использования ARIA.

.ng-hide {
  display: block;
  opacity: 0;
}

<div ng-show="false" class="ng-hide" aria-hidden="true"></div>

Преобразуется в:

<div ng-show="true" aria-hidden="false"></div>

Примечание: Дочерние ссылки, кнопки или другие интерактивные элементы управления также должны быть удалены из порядка табуляции.

ngHide

Директива ngHide отображает или скрывает указанный HTML-элемент на основе выражения, предоставленного атрибуту ngHide. Элемент отображается или скрывается путем удаления или добавления класса .ng-hide к элементу.

Стандартный CSS для ngHide, обратного способа к ngShow, делает ngAria избыточной. Она переключает aria-hidden на директиве при скрытии или отображении, но содержимое уже скрыто с помощью display: none. См. объяснение для ngShow при переопределении стандартного CSS.

ngClick и ngDblclick

Пример

ngMessages

Новый модуль ngMessages позволяет легко отображать валидацию форм или другие сообщения с приоритетным упорядочиванием и анимацией. Чтобы предоставить эти визуальные сообщения программам чтения с экрана, ngAria вставляет aria-live="assertive", заставляя их озвучивать вслух при отображении сообщения, независимо от текущего фокуса пользователя.

<div ng-messages="myForm.myName.$error">
  <div ng-message="required">You did not enter a field</div>
  <div ng-message="maxlength">Your field is too long</div>
</div>

Преобразуется в:

<div ng-messages="myForm.myName.$error" aria-live="assertive">
  <div ng-message="required">You did not enter a field</div>
  <div ng-message="maxlength">Your field is too long</div>
</div>

Отключение атрибутов

Магия атрибутов ngAria может не работать во всех сценариях. Для отключения отдельных атрибутов можно использовать метод config. Просто имейте в виду, что это сообщит ngAria игнорировать атрибут глобально.

Общие паттерны доступности

Рекомендации по доступности, которые применимы к веб-приложениям в целом, также применимы к Angular.

• Альтернативный текст: Добавьте альтернативный текст к визуальной информации, чтобы сделать её доступной, используя эти рекомендации W3C. Подходящий метод зависит от конкретного разметки, но его можно выполнить с помощью скрытых span, aria-label или элементов label, атрибутов изображения alt, figure/figcaption элементов и т.д.
• Семантика HTML: Если вы создаёте пользовательские директивы элементов, Web Components или HTML в целом, используйте встроенные элементы, где это возможно, чтобы воспользоваться встроенными событиями и свойствами. В противном случае используйте ARIA для передачи семантического значения. См. заметки об использовании ARIA.
• Управление фокусом: Руководствуйте пользователя по приложению, когда вьюхи добавляются/удаляются. Фокус никогда не должен теряться, так как это приводит к непредсказуемому поведению и путанице («режим паники»).
• Объявление изменений: При выполнении фильтрации или других сообщений пользовательского интерфейса, отличных от фокуса пользователя, сообщайте с помощью ARIA Live Regions.
• Контрастность и масштабирование цветов: Убедитесь, что контент читаем и интерактивные элементы управления пригодны для использования на всех размерах экрана. Рассмотрите настраиваемые темы пользовательского интерфейса для людей с дальтонизмом, низким зрением или другими нарушениями зрения.
• Постепенное улучшение: Некоторые пользователи не просматривают сайт с включенным JavaScript или не имеют последней версии браузера. Сообщение об условиях использования сайта может информировать пользователей и улучшить их опыт.

Дополнительные ресурсы

• Использование ARIA в HTML
• Доступность AngularJS на ngEurope
• Тестирование с программами чтения с экрана
• Инструменты разработчика доступности Chrome
• Тестирование доступности W3C
• WebAIM
• Проект A11y