В HTML5 атрибут aria может быть применен к большинству элементов, включая стандартные элементы, такие как <div>, <span>, <button>, <input>, <select>, <textarea> и другие, а также пользовательские элементы.
Атрибут aria предназначен для улучшения доступности веб-приложений для пользователей с ограниченными возможностями, такими как слабовидящие, слабослышащие или люди с ограниченными возможностями движения. ARIA (Accessible Rich Internet Applications) определяет набор ролей, состояний и свойств, которые могут быть добавлены к элементам HTML и используются для обозначения дополнительной информации об элементах интерфейса.
Роли aria определяют, как элементы взаимодействуют с пользователем и как они должны быть доступны для использования. Некоторые из наиболее часто используемых ролей aria включают:
aria-hidden: указывает, что элемент должен быть скрыт от пользователей вспомогательных технологий, таких как скринридеры.aria-label: используется для добавления описания к элементу, которое не отображается на экране.aria-describedby: используется для указания элемента, содержащего описание текущего элемента.aria-disabled: указывает, что элемент не может быть активирован или использован.aria-expanded: указывает, что элемент с раскрывающимся списком был развернут или свернут.aria-selected: указывает, что элемент был выбран пользователем.
Пример использования атрибута aria-label для добавления описания кнопки:
<button aria-label="Добавить новую задачу">+</button>В этом примере мы добавили атрибут aria-label к кнопке, чтобы описать ее функцию. Эта информация будет доступна для пользователей вспомогательных технологий, которые используют скринридеры, чтобы озвучивать содержимое веб-страниц.
WAI-ARIA - технологический стандарт для предоставления возможности полноценного использования интернета людьми с ограниченными возможностями (нарушениями работы орагнов зрения и опорно-двигательного аппарата).
Скринридер - программа позволяющая определять и интерпретировать (обычно в виде звуковых и/или голосовых) оповещений события происходящие на экране, например:
- читать вслух текст который сейчас выбран пользователем
- читать вслух название выбранной пользователем графической кнопки
- зачитывать тексты “всплывающих окон” системных уведомлений
Способы сделать сайт доступным
- Масштабируемая верстка (изменение шрифта)
- Контрастность цвета фона и текста
- Возможность работы сервиса с клавиатуры
WAI-ARIA предоставляет разработчикам следующее:
- Роли для описания типа элемента управления, такие как menu, treeitem, slider[en], progressbar.
- Роли для описания структуры веб-страницы (заголовки, секции, таблицы и т. д.).
- Свойства для описания состояний элементов управления.
- Свойства для обозначения блоков страницы, содержание которых может обновляться.
- Свойства для перетаскивания объектов, обозначающие что нужно переместить и куда.
- Возможность описания навигации по сайту при помощи клавиатуры.