Улучшить эту документациюДоступность с ngAria

Цель ngAria — улучшить стандартную доступность Angular, включив общие атрибуты 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.

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

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

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. Это сообщает средствам обеспечения доступности, когда пользовательский элемент управления обязателен.

<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. Это сообщает средствам обеспечения доступности, когда пользовательский элемент управления является только для чтения.

<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” для каждого элемента управления. Это гарантирует, что пользователи программ чтения с экрана не случайно фокусируются на "неизвестных элементах". Управление индексом табуляции для каждого дочернего элемента управления может быть сложным и повлиять на производительность, поэтому лучше придерживаться стандартного CSS display: none. Смотрите четвёртое правило использования 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 игнорировать атрибут глобально.

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

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

• Альтернативные текстовые описания: Добавьте альтернативный текстовый контент для обеспечения доступности визуальной информации, используя эти рекомендации 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