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

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

Включение ngAria

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

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

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

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

• Используя свой любимый инструмент инспекции элементов, найдите атрибуты, добавленные ngAria в вашем собственном коде.
• Протестируйте использование клавиатуры, чтобы убедиться, что tabindex используется правильно.
• Запустите экранный диктор, такой как VoiceOver или NVDA, чтобы проверить поддержку 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, обеспечивая доступность пользовательских элементов с этими ролями с помощью клавиатуры. Вам, как разработчику, все равно нужно обеспечить доступность пользовательских элементов управления. Как правило, каждый раз, когда вы создаёте виджет с пользовательским взаимодействием, убедитесь, что проверили его с помощью клавиатуры и хотя бы одного мобильного и настольного экранного диктора.

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. Элемент отображается или скрывается путём удаления или добавления 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 Components или HTML в целом, используйте встроенные элементы, где это возможно, чтобы использовать встроенные события и свойства. В качестве альтернативы используйте ARIA для передачи семантического значения. См. примечания по использованию ARIA.
• Управление фокусом: направляйте пользователя по приложению при добавлении/удалении представлений. Фокус никогда не должен теряться, так как это вызывает неожиданное поведение и много путаницы («режим паники»).
• Объявление изменений: когда выполняется фильтрация или другие действия UI вне фокуса пользователя, уведомляйте об этом с помощью ARIA Live Regions.
• Контрастность и масштабирование цветов: убедитесь, что контент читабелен и интерактивные элементы управления доступны на всех размерах экрана. Рассмотрите настраиваемые темы пользовательского интерфейса для людей с дальтонизмом, низким зрением или другими нарушениями зрения.
• Постепенное улучшение: некоторые пользователи просматривают веб-страницы без JavaScript или не используют последнюю версию браузера. Сообщение о требованиях к сайту может проинформировать пользователей и улучшить опыт работы.

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

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