Добавление описания к иконкам font-awesome: alt, title

Быстрый ответ

Применяйте атрибут title для показа всплывающих подсказок при наведении на тег <i>. Для обеспечения доступности и полноценного восприятия семантических иконок пользователями средств вспомогательных технологий используйте aria-label.

<i class="icon-example" title="Текст всплывающей подсказки"></i> <!-- Всплывающая подсказка будет показана. -->
<i class="icon-example" aria-label="Описание иконки"></i> <!-- Доступно для вспомогательных технологий. -->

При внедрении иконок в интерфейс с помощью тегов <i> учтите важность их доступности. Не прячьте иконки от вспомогательных технологий и от тех, кто не может их видеть.

Внимательно изучаем доступность и атрибуты

Погружаемся в совместимость с читалками

Для повышения доступности для пользователей читалками используйте семантический HTML. В некоторых случаях обёртывание текста в <span> будет более эффективным, чем применение тега <i> в одиночку. Помните о ARIA-атрибутах как aria-label, которые помогают воспринимать контент средствами вспомогательных технологий. Не забывайте улучшать SEO, добавляя контекст.

Подробнее об этом расскажет наш спикер на видео

Нюансы работы всплывающих подсказок

Атрибут title упрощает создание всплывающих подсказок для пользователей с нормальным зрением. Однако его эффективность может варьироваться в зависимости от браузера. Поэтому может быть полезно применять CSS для создания более надёжных и настраиваемых подсказок.

ARIA как помощник в семантике иконок

ARIA может стать вашим спасителем в вопросах доступности иконок. Атрибуты как aria-label и роль role="img" с aria-labelledby помогут обеспечить соответствие иконок семантическим стандартам и спецификациям WAI-ARIA.

Симбиоз Title и ARIA

Сочетание aria-label для вспомогательных технологий и title для всплывающих подсказок способствует обеспечению наилучшего пользовательского опыта:

<i class="icon-info" title="Больше информации" aria-label="Подробнее"></i>

Визуализация

Тег <i> играет роль декоративного элемента интерфейса:

Тег `<i>` с удовольствием выходит на сцену 🎭.

Без использования alt или title:

🎭: "Если бы я только знал свою роль..." 
👤: "Тебе придётся разобраться самостоятельно!"

С alt (Видно всем, включая вспомогательные технологии):

🎭: "Та-дам! Я — 'Иконка информации'!" 🛈 
👤: "Спасибо, теперь я в курсе!"

С title (Предоставляет подсказки для пользователей со зрением):

🎭: "Подводи сюда курсор, и увидишь чудо!" 💬
👤: "Удивительно, как легко и понятно!"

Совет по визуализации:

Применяйте `alt` для ясности смысла, `title` для контекста, и их комбинация вызовет бурные аплодисменты! 👏👏

Повышаем семантичность и доступность иконок

Расстаемся со стереотипами

Распространённым заблуждением является использование alt с тегами <i>. Однако этот атрибут лучше зарезервировать для <img>. Для иконок целесообразнее применять aria-label, title или aria-describedby для создания дополнительного контекста.

О скрытых текстовых подсказках

Чтобы обеспечить максимальную доступность чтения с экрана, рекомендуется использовать описательный текст в визуально скрытом <span>. Это позволяет пользователям с ограниченными возможностями зрения получить такой же контекст, как и пользователям со зрением.

Тестируем с реальными пользователями

Работу по доступности необходимо проверять, используя считывающие устройства и привлекая реальных пользователей. Обратная связь и тестирование — ключ к улучшению вашего интерфейса.

Имеем общее видение

Всплывающие подсказки — лишь часть общей картины. Обращайте внимание на способы взаимодействия пользователей с интерфейсом, включая навигацию с клавиатуры, режимы с высоким контрастом и другие функции обеспечения доступности.

Настраиваем, тестируем и модифицируем для улучшения доступности

Организуем управление иконками

Если иконки <i> выполняют роль кнопок, используйте подходящие элементы, вроде <button>, чтобы они были по-настоящему интерактивными.

ARIA для отображения изменений

Иконки, которые меняют своё состояние, должны "сообщать" об этом. В таких случаях применяйте ARIA-атрибуты для передачи соответствующей информации.

SEO и конкретизация контекста

Учтите SEO, предлагая контекст с помощью описания в тегах <span>. Это поможет поисковым системам эффективнее оценивать ваш контент.

Полезные материалы

1. HTML i Tag — W3Schools: Изучите подробнее тег <i> и его атрибуты.
2. <i>: Элемент идиоматического текста – HTML — MDN: Рассмотрение использования элемента <i>.
3. Самые высокооцененные вопросы по 'доступности' – Stack Overflow — StackOverflow: Обсудите вопросы доступности с сообществом.
4. WebAIM: Альтернативный текст — WebAIM: Глубокое погружение в альтернативный текст.
5. Доступность HTML5 — Обзор доступности HTML5.
6. Руководство по доступности веб-контента (WCAG) 2.1 — WCAG: Советы по созданию доступного веб-контента.
7. Понимание критерия успеха 1.1.1: Нетекстовый контент — WCAG: Изучите создание доступного нетекстового контента.