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

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

Включение ngAria

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

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

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

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

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

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

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

• ngModel
• ngDisabled
• ngRequired
• ngReadonly
• ngChecked
• ngValue
• 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
• aria-readonly
• aria-disabled

ngAria также добавит tabIndex, гарантируя, что пользователь сможет взаимодействовать с настраиваемыми элементами с этими ролями с помощью клавиатуры. Вам, как разработчику, по-прежнему необходимо обеспечить доступность настраиваемых элементов управления. Как правило, всякий раз, когда вы создаёте виджет с взаимодействием пользователя, обязательно протестируйте его с помощью клавиатуры и, по меньшей мере, одной мобильной и одной настольной программы чтения с экрана.

ngValue и ngChecked

Для облегчения перехода между нативными элементами управления и настраиваемыми, ngAria теперь поддерживает ngValue и ngChecked. Исходные директивы были созданы только для нативных элементов управления, поэтому ngAria расширяет поддержку до настраиваемых элементов, управляя aria-checked для обеспечения доступности.

<custom-checkbox ng-checked="val"></custom-checkbox>
<custom-radio-button ng-value="val"></custom-radio-button>

Превращается в:

<custom-checkbox ng-checked="val" aria-checked="true"></custom-checkbox>
<custom-radio-button ng-value="val" aria-checked="true"></custom-radio-button>

ngDisabled

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

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

Превращается в:

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

ngRequired

Булевый атрибут required допустим только для нативных элементов управления формами, таких как input и textarea. Чтобы правильно обозначить настраиваемые директивы элементов, такие как <md-checkbox> или <custom-input> как обязательные, при использовании ngAria с ngRequired также добавляется aria-required. Это сообщает API доступности, когда настраиваемый элемент управления обязателен.

<md-checkbox ng-required="val"></md-checkbox>

Превращается в:

<md-checkbox ng-required="val" aria-required="true"></md-checkbox>

ngReadonly

Булевый атрибут readonly допустим только для нативных элементов управления формами, таких как input и textarea. Чтобы правильно обозначить настраиваемые директивы элементов, такие как <md-checkbox> или <custom-input> как требуемые, при использовании ngAria с ngReadonly также добавляется aria-readonly. Это сообщает API доступности, когда настраиваемый элемент управления только для чтения.

<md-checkbox ng-readonly="val"></md-checkbox>

Превращается в:

<md-checkbox ng-readonly="val" aria-readonly="true"></md-checkbox>

ngShow

Директива ngShow отображает или скрывает заданный HTML-элемент на основе выражения, предоставленного атрибуту ngShow. Элемент отображается или скрывается путём удаления или добавления CSS-класса .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. Элемент отображается или скрывается путём удаления или добавления CSS-класса .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 игнорировать атрибут глобально.

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

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

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

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

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