Добавление описания к иконкам 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: Изучите создание доступного нетекстового контента.