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