Что такое HTML5 ARIA?

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

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, добавят специфическую для ОС информацию о доступности к отображаемому элементу пользовательского интерфейса, чтобы программа чтения с экрана могла интерпретировать его как меню и читать его вслух с достаточным контекстом, чтобы конечный пользователь мог понять (например, явный «меню» (аудио подсказка) и умеет с ним взаимодействовать (например, голосовая навигация).

ARIA расшифровывается как Accessible Rich Internet Applications.

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

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

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

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

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

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

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

Что это?

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

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

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

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

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

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

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

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

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

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

Что такое Ария?

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

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

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

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

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

Что такое Ария?

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

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

И посмотрите это видео в эфире для ARIA.