02 Июн 2023
2 мин
451

Как использовать атрибуты доступности (aria) в HTML

Узнайте, как использовать ARIA-атрибуты в HTML для создания более доступных веб-приложений, следуя нашим рекомендациям и примерам кода.

Содержание

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

Основные атрибуты ARIA

Роли (Roles)

ARIA-роли определяют, как элемент интерпретируется технологией вспомогательного доступа. Например, кнопка, меню, слайдер и так далее. Чтобы установить роль для элемента, используйте атрибут role:

<div role="button">Нажми меня</div>

Состояния (States) и свойства (Properties)

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

<button role="button" aria-pressed="false">Нажми меня</button>

В примере выше используется атрибут aria-pressed, который указывает, является ли кнопка включенной или выключенной.

Как использовать ARIA-атрибуты

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

В первую очередь стоит использовать семантические HTML-элементы, такие как <button>, <nav>, <header> и т.д., поскольку они уже содержат встроенную информацию о доступности. ARIA-атрибуты следует использовать только в тех случаях, когда семантические элементы не могут быть использованы или недостаточны.

2. Добавьте ARIA-роли

Для элементов, которые не имеют встроенных ролей доступности, добавьте соответствующую ARIA-роль:

<div role="navigation">...</div>

3. Учитывайте ARIA-состояния и свойства

Используйте ARIA-состояния и свойства для определения текущего состояния элемента или его свойств:

<button role="button" aria-expanded="false">Развернуть</button>

4. Обновляйте ARIA-атрибуты с помощью JavaScript

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

const button = document.querySelector('button');
button.addEventListener('click', () =&gt; {
  const isExpanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', !isExpanded);
});

Этот пример демонстрирует обновление атрибута aria-expanded при клике на кнопку.

😉 В заключение, использование ARIA-атрибутов в HTML помогает сделать веб-контент более доступным для всех пользователей. Следуйте приведенным выше рекомендациям, чтобы правильно применять ARIA-атрибуты в своих проектах веб-разработки.

Содержание

Добавить комментарий

Определи профессию по рисунку