Введение в WAI ARIA

Эта статья предназначена для тех, кто плохо знаком с ARIA. Вам нужно понимание HTML и потенциальные трудности, что люди с ограниченными возможностями могут сталкиваться с помощью веб. Это полезно быть знакомым с некоторыми многофункциональных интернет-приложений с точки зрения пользователя.

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

Журнал обновлений

Изменение 8 октября 2008 года: Список документов достопримечательностью ролей обновлены, чтобы отразить изменения в спецификации.

Обновление 1 Апрель 2009: Секция по ария-канал, и ария проживанию = “грубый” удалено значение, чтобы отразить изменения в спецификации. Оба были удалены из спецификации.

Введение

Hypertext Markup Language (HTML) изначально не была предназначена для создания веб-приложений. HTML имеет ограниченный набор интерфейсных элементов управления и основана на модели последовательного коммуникационного сервера клиенту. Разработчики веб-приложений получили вокруг этих ограничений, создавая свои собственные компоненты (виджеты), используя JavaScript, чтобы добавить поведение к виджетам.

К сожалению, методы, используемые для преодоления этих ограничений не были доступны. Хотя пользовательским виджетам они могут выглядеть и вести себя как обычные настольные приложения виджеты, такие как виджет дерева, роли (то, что виджет делает), состояние (своей уникальной конфигурации, например, проверено), а также другие важные свойства не доступны для вспомогательных технологий , таких, как программы чтения с экрана. Это то же самое, как укладка простой текст, чтобы выглядеть как заголовок, а не с помощью заголовка элемента – простой текст выглядит как заголовок, но не выявлено в качестве заголовка для специальных возможностей.

Обновления часто упускается люди, использующие вспомогательные технологии. Вспомогательные технологии обычно ожидают Интернета, чтобы изменяться в ответ на навигацию событие, такое как переход по ссылке или отправки формы. Веб-приложения используют методы, такие как AJAX, для обновления содержания в фоновом режиме, который иногда пропущенные вспомогательных технологий. Даже если вспомогательные технологии осознает обновления, пользователь по-прежнему не могли бы знать, что содержание было обновлено, или как найти обновленный контент.

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

Краткая история HTML

HTML был первоначально разработан, чтобы быть гипертекстовая система для структурирования и обмена связанными документами. Ранние HTML готовит определены тегов, таких как заголовки, абзацы, списки и якоря, чтобы добавить структуру текстовыми документами. Первое предложение о спецификации HTML в IETF также включен элемент IMG, чтобы графики будут отображаться встроенные. Первые официальные спецификации HTML HTML было 2, основанный на ранних черновиков HTML. Эта спецификация введены формы, и определили небольшой набор интерфейсных компонентов для создания поля ввода, кнопки, флажки, переключатели и раскрывающиеся списки. Небольшой набор интерфейсных компонентов, определенных в HTML 2 практически не изменился по сравнению с набором настоящее время мы используем с HTML 4.01.

Коммуникационная модель для HTML основан на модели клиент-сервер. В модели клиент-сервер, клиент посылает запросы и может получать ответы; сервер принимает запросы, обрабатывает запрос на сервере, и отправляет ответ обратно клиенту. Как HTML не было поведение слоя, связь должна была быть последовательной – клиент запрашивает страницу с сервера, сервер обрабатывает запрос и отправляет страницу клиенту.

Веб-приложения

Веб-приложения пытаются подражать обычных приложений рабочего стола, кроме веб-приложения выполняются внутри другого обычное приложение для рабочего стола – браузера. Есть также два фундаментальных различий между HTML и его модель коммуникации, и обычное приложение рабочего стола:

  1. Регулярные настольных приложений есть поведение слой, который не зависит от запросов к серверу.
  2. Регулярные настольных приложений имеют гораздо более богатый набор компонентов интерфейса.

Имитация обычных приложений рабочего стола

Запросы фона сервера

Для того, чтобы эмулировать регулярные настольных приложений, веб-приложений используют JavaScript, чтобы добавить поведение. Например, JavaScript может быть использована, чтобы пункт меню, чтобы развернуть и свернуть, когда пользователь взаимодействует с ним. Иногда данные могут потребовать от сервера. Например, приложение может иметь для извлечения записей из базы данных на сервере, чтобы обновлять информацию о текущей странице. Когда приложение должно взаимодействовать с сервером, веб-приложения используют методы, такие как AJAX или скрытые элементы IFrame для связи с сервером в фоновом режиме.

Имитация доступных компонентов

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

1

Рисунок 1 – Три флажка; остановить, проверить и частично проверена.

2

Рисунок 2 – Слайдер управления с дискретным значениям для обозначения качества.
Проблемы доступности внешнего вида и имитации ощущений

Визуально, подражая богатым компонентов и делает запросы к серверу в фоновом режиме создает более богатый опыт для пользователей. К сожалению, это приводит к проблемам доступности, что особенно плохо для пользователей вспомогательных технологий, таких как пользователи чтения с экрана.

  1. Виджеты построена таким образом редко доступным с клавиатуры.
  2. Роль виджета, что он делает, не доступных для специальных возможностей.
  3. Штаты и свойствах виджета и не предназначенные для вспомогательных технологий.
  4. Обновление и открытие обновления не сообщается вспомогательных технологий.

WAI-ARIA-спасатель

К счастью, все проблемы, изложенные выше решаются Доступная Богатые Инициативы веб-доступности в сети Интернет (WAI-ARIA) спецификации (сокращенно ARIA для остальной части этой статьи). ARIA является положительным, включение технологии – вместо того, разработчики говорят, что они не могут сделать, ARIA позволяет разработчикам создавать богатых веб-приложений. ARIA также очень легко осуществить.

Навигация с помощью клавиатуры

Наряду с предоставлением альтернативного текста для не-текстовые объекты, будучи в состоянии взаимодействовать с элементами интерфейса с помощью клавиатуры является одним из самых основных положений доступности. ).”>Разработчики, которые понимают доступности может создавать собственные виджеты использованием компонентов, которые могут получать фокус, такие как входной элемент с типом значения атрибута изображения (<input type=”image” …>). К сожалению, большинство виджетов не построен с использованием компонентов, которые являются доступными клавиатуры, а вместо этого использовать элементы, такие как элемент изображения, или может состоять из составных элементов, которые должны быть в контейнере элемент, такой как дел, которая не в состоянии получать клавиатура сосредоточиться.

HTML 4 представил TabIndex атрибут, площадь, кнопки, ввода объекта, выбрать и текстовой элементов. TabIndex атрибут HTML 4 принимает положительное значение от 0 до 32767. Навигация начинается с элемента с самым низким номером, и переходит к элементу с наибольшим числом. Элементы со значением 0 посещаются в порядке их появления в разметке. Если разметка имеет логическую структуру, TabIndex атрибут не является обязательным для элементов интерфейса, которые уже находятся в порядке вкладку клавиатуры.

ARIA расширяет TabIndex атрибут так, что он может быть использован на всех видимых элементов. ARIA также позволяет отрицательного значения должны быть указаны для элементов, которые не должны появляться в том порядке вкладку клавиатуры, но можно программно сосредоточены (передать фокус элементу со сценариями). Поскольку фактическое значение отрицательного числа не имеет значения (элемент никогда не получает фокус ввода), значение -1 обычно используется для элементов, которые не должны быть включены в последовательности переходов, но, возможно, необходимо иметь возможность получать программной направленности. Например, можно создать виджет меню, где Само меню в последовательности переходов и получает фокус при обходе к нему, но меня не в порядке вкладку клавиатуры. Вместо этого, пункты меню могут быть запрограммированы таким образом, они можно перемещаться с помощью клавиш управления курсором. Таким образом, пользователи не должны вкладку через все пункты в меню, и может лучше ориентироваться в документе. Это верно для всех виджетов, которые имеют ряд компонентов, которые нужны клавиатура доступа, такие как дерево.

Добавление к естественному порядку Tab

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

Кто я?

ARIA вводит роли атрибута, чтобы помочь определить виджеты, такие как слайдер, и определить структуру страницы, такие как раздел навигации. Одна из основных проблем, с веб-приложений, в том, что любой элемент может быть использован для виджета. HTML элементов, которые уже имеют предопределенные роли. Роль элементом является то, что он делает – ее роль в структуре. Например, роль заголовка хорошо понимают вспомогательных технологий. Когда виджеты строятся с существующими элементами, роль элемента является то, что открыл вспомогательных технологий, а не то, что он визуально представляет в виджете. Например, если большой палец для ползунка создан с использованием элементов изображения с соответствующими альтернативный текст, то программа чтения с экрана, скорее всего, объявит управления, как “Graphic, thumb”, в отличие от более понятное имя, например, “slider, value 16 percent”.

3
Рисунок 3 – Slider большого пальца.

Значение, которое в роли атрибута козыри роль родной элемента. В следующем примере, входной элемент имеет атрибут роли слайдер (мы будем смотреть на некоторые из других свойств ARIA далее в этой статье) – роль подвергаться вспомогательные технологии является слайдер, а не вход.

Когда этот элемент получает фокус, пользователь чтения с экрана понимает, какую роль играет этот виджет. Спецификации ARIA поддерживает список ролей.

Роли Документов Landmark

Так же как и роли, чтобы помочь определить виджетов, есть роли, которые могут помочь определить структуру документа. Документ ориентиры представляют собой подмножество регулярных ролей, которые помогают пользователям для чтения с экрана понять роль раздел и помочь ориентироваться в документе.

4

Рисунок 4 – Структура страницы.

ARIA определяет следующие роли исторического документа:

article
Контент, который имеет смысл в своем собственном праве, например, для отправки в блог, комментарий в блоге, сообщения в форуме, и так далее.
banner
Сайт-ориентированный контент, например, заголовок страницы и логотип.
complementary
Справочные материалы для основного содержания, но смысл в свои права, когда отделен от основного содержания. Например, погоды, перечисленными на портале.
сontentInfo
Ребенка контента, например, сноски, авторские права, ссылки на заявление о конфиденциальности, ссылки на предпочтения, и так далее.
main
Содержание, которое непосредственно связано с или расширяется на центральной содержание документа.
navigation
Содержание, которое содержит ссылку для перехода этого документа и / или связанных с ним документов.
search
Этот раздел содержит форму поиска, чтобы поиск по сайту.

Следующий пример задает ориентир роли баннеров, навигации и основным для создания страницы структуры, показанной на рисунке 4.


ARIA состояний и свойств

ARIA состояний и свойств позволяют дополнительной информации о виджете, которая должна предоставляться вспомогательные технологии, чтобы помочь пользователю понять, как взаимодействовать с виджетом. Состояние идентифицирует уникальную конфигурацию информации для объекта. Например, арии проверкой свойство имеет три значения состояния; истина, ложь и смешанные.

В слайдер приведенном выше примере, мы включили различные арии-свойств, как показано ниже, которая помогла описать виджет для специальных возможностей.

aria-ValueMin
Магазины наименьшее значение диапазона может иметь.

aria -Valuemax
Сохраняет высокие значения диапазона может иметь.

aria -valuenow
Сохраняет текущие значения в диапазоне.

aria -valuetext
Магазины читаемый текст, чтобы помочь пользователю понять контекст. Например, “30 долларов”.

aria -labelledby
Сохраняет ID атрибут текстовую метку содержащей соответствующий запрос на этот виджет.

Некоторые свойства могут быть обновлены с помощью сценариев. Например, aria -valuenow и aria -valuetext свойства нашего слайдера виджет будет обновляться, когда большой палец перемещается.

Добавление ARIA роли и атрибуты не будет проверять с HTML 4.01 или XHTML 1.0, но это не страшно, а ария добавления важной информации для спецификаций, которые были написаны давно. Работа проводится определение DTD, которые можно использовать с модульными XML, например, XHTML 1.1. Существует полный список состояний и свойств, чтобы помочь определить доступные виджеты в арии спецификации.

Живые Регионы

Текущие регионах позволяют элементов документа будет объявлено в случае изменений, без потери пользователю сосредоточиться на своей текущей деятельности. Это означает, что пользователи могут получить информацию о новинках, не теряя своего места в пределах содержания. Например, приложение чата может объявить ответ от лица пользователя в чате с, не перемещая фокус с поля ввода текста, чтобы добавить строку чата.

aria-live
Понятности обновленного содержания является одним из самых больших препятствий для пользователей чтения с экрана. ARIA предоставляет арию проживанию собственность, которая имеет значение, указывающее уровень детализации для региона. Ниже приведены значения многословие, которые могут быть использованы с арией проживанию собственности.

off
Это значение по умолчанию, и указывает, что регион не живой.

polite
Это нормально и ожидаемое поведение для живых регионах. Значение вежливый означает, что нет необходимости отвечать, пока пользователь не завершит свой текущий активности.

assertive
Это значение является более высоким приоритетом, чем обычно, но не обязательно прерывать пользователю немедленно.
Есть некоторые другие важные свойства, которые можно использовать при определении живых областей, приведены ниже.

Свойства Аria-atomic

Ария-атомные свойства необязательное свойство живых регионов, которые могут иметь значения истинным или ложным (по умолчанию, если это свойство не указано). Когда регион обновляется, арии-атомные свойство используется, чтобы указать, если вспомогательные технологии должны представить полностью или частично изменено региона для пользователя. Если это свойство имеет значение ИСТИНА, вспомогательная технология должна представлять весь регион в целом, в противном случае часть региона, который изменил может быть объявлено на своих собственных.

В следующем примере все элементы в неупорядоченный список будет объявлен во всей их полноте, когда регион говорится, если иной элемент далее вниз по цепочке отменяет ария-атомные собственности.

Свойства aria-busy

Ария занятой собственности необязательное свойство живых регионов, которые могут иметь значения истинным или ложным (по умолчанию, если это свойство не указано). Если несколько частей живой регионе должны быть загружены до изменения доводятся до сведения пользователей, арии занятой собственности может быть установлен в истинное до финальной части не загружен, а затем установите неверным при завершении обновлений. Это свойство предотвращает вспомогательных технологий объявив изменения перед завершении обновлений.

Свойстваaria-relevant

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

additions
    Узлы добавляются в DOM в регионе.
removals
    Узлы удаляются из DOM в регионе.
text
    Текст добавляется или удаляется из DOM.
all
    Все приведенные выше (добавления, удаления текста) относятся к этому региону.

В отсутствие явных арии-соответствующее имущество, то по умолчанию будет предположить, что это текстовые изменения и дополнения (ария-соответствующими = “дополнений текст”). Вот как это будет только объявляют об изменениях, если узлы добавляются в DOM в регионе. Если есть изменения текста или узлы удаляются в регионе, пользователь не будет уведомлен.

Когда можно использовать ARIA?

Там нет отрицательных побочных эффектов от использования ARIA, так что вы можете начать использовать его сразу же. Все четыре основных браузеров внедрили поддержку ARIA, или планируют реализовать поддержку ARIA. Opera 9.5 и Firefox 1.5 + уже включает поддержку ARIA. Internet Explorer 8 Beta имеет поддержку ARIA, и WebKit, открытой платформы приложений источника за Safari, объявили, что они начали добавлять поддержку ARIA.

ARIA также становится широко поддерживается вспомогательными технологиями. JAWS 7.1 +, Window-Eyes 5.5 +, NVDA, ZoomText 9 +, и другие, имеют базовую поддержку ARIA, и ситуация призван улучшить.


Будьте одним из первых пользователей

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

Использование ролей документа

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

Эта функция может быть вызвана с идентификатором секции, и роль документа ориентиром для раздела. Так рассматривая структуру документа выше, мы могли бы использовать эту функцию JavaScript, чтобы вставить атрибут роли, а не писать его в разметке.

Укажите обязательные поля

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

WordPress начали использовать ария-необходимый атрибут для обязательных полей в разделе комментариев для записей в блогах.

Добавить другими соответствующими свойствами

Есть много свойств ARIA, которые можно использовать на простейших веб-сайтов, таких как Ария-labelledby и ария-describedby. Ария-labelledby свойство указывает на один или более элементов, которые считаются метку для элемента, а ария-describedby свойство указывает на один или элементов, которые считаются описание для элемента.


Приоритеты разметки

ARIA разметка имеет приоритет над языком разметки хозяин. Это означает, что если ария-labelledby используется наряду этикетка для = “”, ария-labelledby будет иметь приоритет. Метка элемент по-прежнему рекомендуется для старых браузеров, которые не понимают ARIA. Простой метод, чтобы избежать столкновений является использование ария-labelledby атрибута для ссылки на этикетке – это обеспечивает метка доступно независимо от ARIA поддержки.

Просмотрите полный список состояний и свойств, чтобы увидеть, как ARIA может помочь вам обеспечить ваш контент более доступным.


Теперь все вместе

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

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

Ресурс: Introduction to WAI ARIA

Comments are closed.

Post Navigation