ARIA-атрибуты в SVG

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

Установка ARIA-атрибутов через SVG.js

SVG.js предоставляет методы .attr() и .aria() для установки атрибутов доступности. Метод .aria() является специализированным и автоматически добавляет префикс aria- к указанному атрибуту.

Пример:

const draw = SVG().addTo('body').size(400, 400);

const circle = draw.circle(100).fill('red').move(50, 50);

// Установка ARIA-атрибутов
circle.aria('label', 'Красный круг');
circle.aria('hidden', false);

Здесь aria-label задаёт текстовое описание элемента, а aria-hidden управляет видимостью для вспомогательных технологий.

Основные ARIA-атрибуты для SVG

  1. aria-label Предоставляет краткое текстовое описание элемента. Используется для объектов, которые не содержат текстового контента.

  2. aria-labelledby Ссылается на другой элемент, содержащий описание. Применяется, если несколько элементов разделяют одно текстовое описание.

  3. aria-hidden Определяет, должен ли элемент быть доступен для вспомогательных технологий. Значение true скрывает элемент, false — делает доступным.

  4. role Определяет семантическую роль элемента. Для SVG это может быть img, graphics-document, graphics-object и другие. Пример использования:

circle.attr('role', 'img');

Интеграция ARIA с динамическими элементами

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

const data = [30, 50, 70];
const circles = data.map((value, index) => {
  return draw.circle(value).fill('blue').move(100 * index, 100)
             .aria('label', `Значение: ${value}`)
             .aria('hidden', false);
});

Если значение элемента изменяется, ARIA-метки тоже должны обновляться:

circles[0].radius(60).aria('label', 'Значение обновлено: 60');

Использование ARIA с группами и контейнерами

SVG-группы (<g>) часто используются для объединения элементов. ARIA-атрибуты можно назначать на группы, чтобы описать всю структуру:

const group = draw.group();
group.add(draw.rect(100, 50).fill('green'));
group.add(draw.text('Зеленый прямоугольник').move(10, 10));

// Назначение ARIA для группы
group.aria('label', 'Группа из прямоугольника и текста');
group.aria('role', 'group');

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

Взаимодействие ARIA с событиями

SVG.js поддерживает события (click, mouseover, focus). Для доступности важно обновлять ARIA-атрибуты при взаимодействии:

circle.on('mouseover', () => {
  circle.aria('label', 'Курсор над красным кругом');
});

circle.on('mouseout', () => {
  circle.aria('label', 'Красный круг');
});

Таким образом, экранные читалки смогут получать актуальное состояние графического элемента.

Практические рекомендации

  • Для статичных графических элементов используйте aria-label или aria-labelledby.
  • Для интерактивных объектов добавляйте role и обновляйте ARIA при изменении состояния.
  • Используйте aria-hidden="true", если элемент является декоративным и не несет смысловой нагрузки.
  • Применяйте ARIA на уровне групп, если элементы логически связаны, чтобы упростить восприятие.

Совместимость с браузерами

Большинство современных браузеров корректно обрабатывают ARIA в SVG. Однако важно тестировать графику с экранными читалками (например, NVDA, VoiceOver), так как поддержка некоторых ARIA-атрибутов для SVG может различаться.

Итог

Использование ARIA в SVG.js обеспечивает доступность интерактивной и статичной графики. Методы .aria() и .attr() позволяют легко интегрировать эти атрибуты, а правильное применение ролей, меток и управления видимостью делает веб-графику понятной для всех пользователей.

Оглавление