Что такое HTML5 ARIA?

168

Что такое HTML5 ARIA? Я не понимаю, как его реализовать.

  • 4
    Обратите внимание, что WAI-ARIA предшествует HTML5 и не требует его, хотя атрибуты ARIA будут считаться действительными только с помощью валидатора HTML5 или по сравнению с расширенным DTD ARIA. Тем не менее, проект HTML5 в настоящее время запрещает некоторые конструкции WAI-ARIA.
  • 0
    Я видел это в HTML в Facebook.
Теги:
wai-aria

5 ответов

151
Лучший ответ

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

Вот пример из спецификации ARIA:

<ul role="menubar">

  <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem" aria-haspopup="false">New</li>
      <li role="menuitem" aria-haspopup="false">Open…</li>
      ...
    </ul>
  </li>
  ...
</ul>

Обратите внимание на атрибут role внешнего элемента <ul>. Этот атрибут никак не влияет на то, как разметка отображается на экране браузером; однако браузеры, поддерживающие ARIA, будут добавлять информацию о специфичности для ОС к отображаемому элементу пользовательского интерфейса, чтобы считыватель экрана мог интерпретировать его как меню и читать вслух с достаточным контекстом для понимания конечным пользователем (например, явный "меню" звуковой подсказки) и может взаимодействовать с ним (например, голосовая навигация).

  • 10
    В чем разница между атрибутом данных и арией?
  • 48
    aria специально для доступности и не должна использоваться для хранения случайных данных. data предназначены для случайных данных, которые приложение должно связать с узлом.
Показать ещё 1 комментарий
50

ARIA - это доступные интернет-приложения с широким охватом.

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

И если вам интересно, что такое WAI-ARIA, это то же самое.

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

WAI = Инициатива доступности веб-сайтов

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

Большинство ваших сомнений будут очищены, если вы прочтете эту статью

http://www.w3.org/TR/aria-in-html/

12

Что это такое?

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

Это достигается путем применения ролей и атрибутов состояния к HTML 4.01 или более поздней разметке, которая не имеет отношения к макету или функциональности браузера, но предоставляет дополнительную информацию для вспомогательных технологий.

Одним из краеугольных камней WAI-ARIA является атрибут роли. Он сообщает браузеру сообщить вспомогательную технологию, что используемый элемент HTML не является тем, что предлагает название элемента, но что-то еще. Хотя он изначально является только элементом div, этот элемент div может быть контейнером в список автозаполняющих элементов, и в этом случае роль "списка" будет полезна для использования. Аналогично, другой div, являющийся дочерним элементом этого контейнера div и содержащий один элемент опции, должен затем получить роль "option". Два divs, но через роли, совершенно другое значение. Роли моделируются после широко используемых сопоставлений настольных приложений.

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

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

Что это не так?

WAI-ARIA не влияет на поведение браузера. В отличие от реального элемента кнопки, например, div, который вы накладываете на роль "button" на, не дает вам фокусности клавиатуры, автоматический клик, когда на нем нажимаются Space или Enter, и другие свойства, которые являются неотъемлемыми для кнопка. Сам браузер не знает, что div с ролью "button" является кнопкой, только его часть API доступности.

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

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

Да, верно, этот раздел на первом месте! Потому что первое правило использования WAI-ARIA: Не используйте его, если вам абсолютно не нужно! Чем меньше WAI-ARIA у вас есть, тем больше вы можете рассчитывать на использование собственных виджетов HTML, тем лучше! Есть еще несколько правил, которые вы можете выполнить, вы можете проверить их здесь.

10

Что такое ARIA?

ARIA появилась как способ решения проблемы доступности использования языка разметки, предназначенного для документов, HTML, для создания пользовательских интерфейсов (UI). HTML включает в себя множество функций для работы с документами (P, h3, UL, TABLE), но только базовые элементы пользовательского интерфейса, такие как A, INPUT и BUTTON. Windows и другие операционные системы поддерживают API, позволяющие AT (Accessive Technology) получить доступ к функциям элементов управления пользовательского интерфейса. Internet Explorer и другие браузеры отображают собственные HTML-элементы в API доступности, но элементы управления html не так богаты, как элементы управления, общие для настольных операционных систем, и их недостаточно для современных веб-приложений. Пользовательские элементы управления могут расширять html-элементы для обеспечения богатых Пользовательский интерфейс, необходимый для современных веб-приложений. До ARIA браузер не имел возможности разоблачить это дополнительное богатство API доступности или AT. Классическим примером этой проблемы является добавление обработчика кликов к изображению. Он создает то, что, по-видимому, является кнопкой мыши для пользователя мыши, но по-прежнему является просто изображением для клавиатуры или пользователя AT.

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

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

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

7

Я задал другой вопрос относительно ARIA. Но это содержание выглядит более перспективным для этого вопроса. хотели бы поделиться ими

Что такое ARIA?

Если вы приложите усилия к тому, чтобы сделать свой сайт доступным для пользователей с различными привычками просмотра и физическими недостатками, вы, скорее всего, узнаете атрибуты роли и арии. WAI-ARIA (доступные богатые интернет-приложения) - это способ предоставления способов динамического веб-контента и приложений, чтобы люди с ограниченными возможностями могли идентифицировать и успешно взаимодействовать с ним. Это делается через роли, которые определяют структуру документа или приложения, или через атрибуты aria- *, определяющие виджет-роль, отношения, состояние или свойство.

Использование ARIA рекомендуется в спецификациях, чтобы сделать приложения HTML5 более доступными. При использовании семантических элементов HTML5 вы должны установить соответствующую роль.

И посмотрите ваше видео с трубкой для ARIA в прямом эфире.

  • 0
    Небольшая коррекция: При использовании семантических элементов HTML5, вы должны установить только свою соответствующую роль , если семантику элемента , который вы выбрали , не дают достаточно информации. Другими словами, если у вас есть элемент nav, нет необходимости добавлять role = "navigation", потому что роль уже выбрана из выбора элемента. Но если у вас есть элемент ввода для поиска по сайту, вы должны добавить role = "search", потому что элементы ввода используются для многих других целей, помимо поиска, и это отмечает этот конкретный ввод как имеющий роль поиска.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню