[Перевод] Правила использования ARIA в HTML


habralogo.jpg

The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).


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



1. Используйте семантический HTML в пользу ARIA


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

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


Поэтому, по возможности, нам стоит использовать семантический HTML-элемент, а не ARIA-атрибут.


Вместо того, чтобы создавать

элемент и добавлять ARIA-роль:


Click Me
Неправильный подход

Нам следует использовать элемент

2. Не изменяйте значения семантических элементов ARIA-ролями


Не изменяйте нативную семантику элемента, если вам это не необходимо.

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


Или, в крайнем случае, мы можем добавить ARIA-роль к элементу, который не несет такого смысла.


Heading Button


3. Интерактивные элементы ARIA должны быть доступны для всех сред


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

Недостаточно использовать ARIA-роль на элементе, чтобы по-настоящему изменить его роль. Если мы попытаемся изменить, например,

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


В руководстве ARIA имеется список возможностей, которые должен иметь каждый элемент. Например, настоящая кнопка должна удовлетворять следующим требованиям:


  • Должна быть кликабельной с помощью курсора
  • Должна быть кликабельной с помощью клавиши Enter
  • Должна быть кликабельной с помощью клавиши пробела

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


4. Используйте соответствующие роли для видимых фокусируемых элементов


Не используйте role="presentation" или aria-hidden="true" на видимых фокусируемых элементах.

ARIA-атрибут role="presentation" подразумевает, что элемент предназначен для визуального взаимодействия и не является интерактивным. Атрибут aria-hidden="true" говорит о том, что элемент не должен быть видим. Когда мы используем эти атрибуты, нам нужно знать, к каким элементам они применяются и являются ли эти элементы видимыми и интерактивными. Например, обе эти кнопки приведут к тому, что некоторые пользователи будут фокусироваться на элементе, который для них не существует.


  
  

Неправильный подход


Эти атрибуты должны применяться только к элементам, которые не являются интерактивными или являются невидимыми.


  
  

5. Интерактивные элементы должны иметь Доступное описание


Все интерактивные элементы должны иметь Доступное описание.

Элементы, с которыми можно взаимодействовать, например кнопки и ссылки, должны иметь «доступное описание».


Доступное описание (accessible name) — имя элемента пользовательского интерфейса.
Очень просто объяснить это на пример кнопки «OK». Текст «OK» — доступное описание (accessible name). (прим. переводчика)

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




  
  

Другие элементы, например кнопки и ссылки, могу получить своё Доступное описание из их контента или label-атрибута.(подробнее).

Комментарии (0)

© Habrahabr.ru