Каковы последствия доступности использования такой структуры, как angularjs?

Где мы стоим

Мы находимся под давлением доступности Интернета, чтобы соответствовать определенным законам, регулирующим общественные/образовательные учреждения. До сих пор мы просто убедились:

  • наши макеты были логически упорядочены;
  • изображения имели теги alt="". но быстро узнают, что нам нужно позаботиться и действительно подумать об этом.

Что мы рассматриваем

Мы рассматриваем AngularJS как основу для динамических веб-приложений, но обеспокоены тем, что это может означать для нашей доступности.

Я понимаю, что браузер без JavaScript, скорее всего, нарушит высокодинамичное приложение Angular (например, такие выражения, как {{ item.something }}, встроенные в разметку, используя ng-repeat для создания списков из одного <li> боковые частичные представления как пустые теги и т.д.).

Вопрос

Мне интересно, есть ли хорошо понятые лучшие практики или информационные ресурсы для этих видов фреймворков, которые в значительной степени зависят от динамической разметки и встроенных тегов, которые можно воспринимать как тарабарщину на что-то как экранный ридер или даже браузер с отключенным JavaScript и CSS.

Ответы

Ответ 1

Все те же принципы применяются, например, используя текст для изображений, хорошее использование заголовков, используйте соответствующие структуры HTML (5) для контента.

Возможно, вы создаете его с помощью JavaScript, но читатели экрана за последние 5 лет понимают это и используют API доступности браузера для доступа к DOM. Аспект non-JavaScript просто не проблема доступности. Количество пользователей программы чтения с экрана без JavaScript является таким же, как и для общего населения, поэтому оно встречается как полностью сформированный HTML, а не сырая разметка, которую вы видите в процессе разработки.

NB: Я считаю прогрессивное улучшение хорошим подходом, но с Angular.js вы решаете, чтобы не принимать этот подход. Если вы хотите узнать о производительности и прогрессивном улучшении, я думаю, ответил на это.

Конечно, вы не используете Angular.js только для создания стандартных страниц контента, поэтому вам нужно ускориться с помощью WAI -ARIA и как использовать ARIA в HTML. Указывает, как динамически разметки вещи, которые не охватываются традиционными методами HTML, такими как вкладки, деревья, сетки и т.д.

Для практического примера методов WAI ARIA на практике я бы посмотрел руководство по техническому стилю Whatsock.

Одно отличие от традиционных веб-сайтов - как вы управляете обновлениями страниц, поскольку вы управляете фокусом клавиатуры, а не обновляете страницу. Но помимо этого, WAI-ARIA - это то, что нужно читать.

Ответ 2

Традиционно Angular не поощрял разработчиков к кодовому интерфейсу пользователя "правильно" - слишком легко было создать недоступные настраиваемые директивы элементов (например, ngClick на div), и никакой поддержки доступности не было. Однако он улучшился с выпуском Angular 1.3x и модуля ngAria. Теперь, включив ngAria в ваше приложение, некоторые атрибуты ARIA автоматически применяются, так что вам не нужно их управлять.

Например, директива ngClick теперь применяется tabIndex="0" и ngKeypress (пока эти параметры не отключены), так что создавать непрозрачные события кликов не так просто. ngAria также скоро добавит role="button", чтобы сообщить цель кликабельного элемента: это может быть переопределено для других ролей. Дополнительную информацию см. В этом запросе на растяжение: https://github.com/angular/angular.js/pull/10318

Другим способом, которым может помочь ngAria, является добавление aria-disabled к любому использованию ng-disabled. Это гарантирует, что пользовательские элементы управления, отключенные инфраструктурой, будут доступны по умолчанию, например:

<md-button ng-disabled="true">

С ngAria это будет:

<md-button ng-disabled="true" aria-disabled="true">

Для всего списка поддерживаемых атрибутов обратитесь к документам API ngAria: https://docs.angularjs.org/api/ngAria

ngAria продолжит развиваться (и мне жаль, что он не был испечен вместо модуля), но это здорово видеть, что доступность наконец поддерживается основной картой.

Для каждого из нас по-прежнему важно сохранить доступность и код ответственно, но Angular больше не должен мешать вам. Ответ Alistair на этот вопрос имеет фантастические ресурсы: я бы определенно обращался к ним за советами по управлению фокусом клавиатуры, использованию ARIA в HTML и т.д. Вы также можете обратиться к новому руководству для разработчиков Angular.js для ngAria: https://docs.angularjs.org/guide/accessibility

И еще одно: если у кого-то есть идеи для ngAria, обязательно создайте проблему Github или подайте запрос на перенос! Это усилия, направленные на сообщество.

Ответ 3

Ваши самые большие проблемы с AngularJS и доступностью будут:

  • Управление фокусом - как только ваш маршрут приведет к обновлению раздела контента, и этот раздел содержит фокус, браузер отправит фокус на верхнюю часть документа, а программа чтения с экрана и пользователи, работающие только на клавиатуре, будут потеряны. Вам нужно будет активно управлять своим фокусом.
  • Объявления динамических обновлений - привязка данных позволяет обновлять DOM без взаимодействия с вашим JavaScript. Если эти обновления важны, пользователям экрана необходимо будет сообщить об этих обновлениях, используя регионы, поддерживающие арию. Правильное использование этих функций - особенно на iOS будет сложным.
  • Проверка формы - пример AngularJS использует все элементы для сообщений об ошибках, которые отображаются при неудачной проверке формы. Ни одна из ассоциаций не правильна с полями ввода, и те же проблемы, что упоминалось в разделе № 2, должны быть устранены, если их автоматически отображать (особенно когда это делается с использованием размытия).
  • Обновление атрибута заголовка - когда ваш маршрутизатор изменяет ваш URL-адрес, вы должны обновить заголовок документа

Кроме этого, это просто еще одно приложение HTML.

В этом реестре Github есть несколько директив и служб Angular.js для решения некоторых из этих проблем https://github.com/dequelabs/ngA11y