Улучшить эту документациюДоступность с помощью 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” на каждом элементе управления. Это гарантирует, что пользователи экранных дикторов случайно не сфокусируются на «неизвестных элементах». Управление индексом табуляции для каждого дочернего элемента управления может быть сложным и повлиять на производительность, поэтому лучше всего использовать стандартный 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 игнорировать атрибут глобально.

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

Рекомендации по доступности, применимые к веб-приложениям в целом, также применимы к 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