Что это?
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, в который вы добавляете роль «кнопки», не обеспечивает фокусируемость клавиатуры, автоматический обработчик щелчка при нажатии на него пробела или клавиши «Ввод» и другие свойства, которые не нужныкнопка.Сам браузер не знает, что div с ролью «button» - это кнопка, только его часть API доступности.
Как следствие, это означает, что вам абсолютно необходимо реализовать навигацию с помощью клавиатуры, фокусируемость и другие.паттерны поведения известны из настольных приложений самостоятельно.Вы можете найти некоторые Продвинутые техники ARIA Здесь .
Когда я не должен использовать это?
Да, правильно, этот раздел на первом месте!Потому что первое правило использования WAI-ARIA: Не используйте его, если вам абсолютно не нужно! Чем меньше у вас WAI-ARIA и чем больше вы можете рассчитывать на использование нативных HTML-виджетов, тем лучше!Есть еще некоторые правила, которым нужно следовать, вы можете проверить их здесь .