Альтернативные описания

Альтернативные описания (<title> и <desc>) в SVG играют ключевую роль для доступности графики и поисковой оптимизации. В библиотеке SVG.js их создание и управление выполняется с помощью методов title() и desc(). Эти элементы позволяют обеспечить текстовое пояснение к графическим объектам, которое воспринимают скринридеры и другие ассистивные технологии.

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

const rect = draw.rect(100, 100).fill('#3498db');

// Добавление альтернативного заголовка
rect.title('Синий квадрат');

// Добавление описания
rect.desc('Этот квадрат используется для демонстрации возможностей SVG.js');

Важно: <title> отображается как всплывающая подсказка в большинстве браузеров, а <desc> служит исключительно для текстового описания для скринридеров. В библиотеке SVG.js методы title() и desc() возвращают объект SVG.js, что позволяет удобно цепочечно комбинировать методы.

Работа с динамическими описаниями

SVG.js позволяет динамически изменять текст альтернативного описания после создания элемента:

rect.title('Обновленный заголовок');
rect.desc('Новое текстовое описание для скринридеров');

Если передать пустую строку, элемент <title> или <desc> будет удалён:

rect.title('');
rect.desc('');

Вложенные элементы и наследование описаний

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

const group = draw.group();

const circle = group.circle(50).fill('#e74c3c');
const line = group.line(0,0,100,100).stroke({ width: 2, color: '#2ecc71' });

group.title('Группа элементов');
circle.desc('Красный круг внутри группы');
line.desc('Зелёная линия пересекающая круг');

Особенность: скринридеры читают сначала <title> и <desc> родительской группы, а затем дочерние элементы. Это позволяет создавать иерархическую структуру описаний для сложных иллюстраций.

Автоматическое связывание с интерактивными элементами

SVG.js обеспечивает поддержку интерактивных элементов, таких как click(), hover(), при этом <title> автоматически выступает в роли подсказки:

rect.on('mouseover', () => rect.fill({ color: '#2c3e50' }))
    .on('mouseout', () => rect.fill({ color: '#3498db' }))
    .title('Наведи мышь, чтобы изменить цвет квадрата');

Многоязычные описания

Для приложений с мультиязычным интерфейсом SVG.js позволяет управлять содержимым <title> и <desc> через переменные:

const lang = 'en'; // 'ru', 'es', 'de'
const titles = { en: 'Blue Square', ru: 'Синий квадрат' };

rect.title(titles[lang]);

Такой подход упрощает локализацию интерактивной графики.

Стилизация <title> и <desc>

Элементы <title> и <desc> напрямую не стилизуются через CSS для отображения на странице, но их содержимое может быть использовано программно:

console.log(rect.node.querySelector('title').textContent);
console.log(rect.node.querySelector('desc').textContent);

SVG.js обеспечивает прямой доступ к DOM-узлам через свойство .node, что позволяет интегрировать данные описания в другие интерфейсные компоненты.

Управление несколькими описаниями

SVG.js поддерживает добавление нескольких <desc> к одному элементу, что позволяет хранить подробные пояснения или инструкции:

rect.desc('Первое описание');
rect.desc('Второе описание'); // добавится как отдельный элемент <desc>

Для управления множеством описаний можно использовать стандартные методы DOM:

const descs = rect.node.querySelectorAll('desc');
descs.forEach(d => console.log(d.textContent));

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

  • Использовать <title> для краткого заголовка элемента.
  • Использовать <desc> для подробного объяснения, которое не видно визуально.
  • Для групповых объектов задавать <title> и <desc> на уровне группы для удобства.
  • Поддерживать динамическое обновление описаний для интерактивной графики.
  • Применять переменные и структуры данных для многоязычной локализации описаний.

Эти возможности позволяют создавать доступные, информативные и интерактивные SVG-графики, полностью управляемые через библиотеку SVG.js, с возможностью интеграции в веб-приложения и интерфейсы с поддержкой ассистивных технологий.

Оглавление