Добавление alt тегов для фоновых изображений в CSS

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

К сожалению, фоновые изображения в CSS не поддерживают атрибут alt, в отличие от элемента <img>. Однако в целях обеспечения доступности можно использовать атрибут aria-label:

<div style="background:url('image.jpg');" aria-label="Описание изображения"></div>

Таким образом, вы предоставляете текстовое описание для вспомогательных технологий, но визуально оно не будет отображаться. Скажем, некий скрытый трюк, согласитесь?

Кратко и по делу (TL;DR)

Атрибут alt не применим для фоновых изображений в CSS, но у нас есть альтернативы:

1. Применение ARIA.
2. Использование элемента <img> с alt, если изображение имеет значение.
3. Применение атрибута title для показа подсказок.
4. "Скрытие" элемента <img>.

Где и когда: атрибут alt и фоновые изображения в CSS

Где можно найти alt для фоновых изображений в CSS? Нигде. Почему так? Фоновые изображения в CSS используются исключительно для оформления сайта, поэтому здесь нет места для alt. Тем не менее, давайте более детально обсудим этот вопрос.

ARIA и img: новые верные союзники

В помощь к нам приходят роли ARIA и атрибут alt в элементе img, если требуется предоставить доступный текст для фоновых изображений.

<!-- ARIA выступает здесь как рыцарь в блестящих доспехах -->
<div style="background:url('icon.png');" role="img" aria-label="Описание иконки"></div>

<!-- Элемент `img` используется, когда картинка несет в себе смысл -->
<img src="critical-image.jpg" alt="Краткое описание изображения">

Title, скрытый <img>, декоративные или содержательные изображения?

Ваше изображение может быть либо декоративным, либо содержать важную информацию. Если его задача — создавать атмосферу, подойдет фоновое изображение в CSS. Если же оно несет в себе смысл, предпочтительнее использовать <img> с атрибутом alt.

Рассмотрите возможность использования title для подсказок и скрытого <img>, который не отображается визуально, но предоставляет альтернативные описания.

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

Используем эмодзи для наглядности:

🖼 <- HTML элемент
🏞 <- Фоновое изображение на CSS (к сожалению, без атрибута alt)

Проблема возникает, когда фоновое изображение исчезает:

<div style="border: 2px solid #000; width: 100px; height: 100px;">
  <!-- Где само изображение? -->
</div>

Мы видим лишь пустую рамку, которая ничего не знает о том какое изображение нужно отобразить:

🖼 <- 🤷‍♂️ (Где изображение?)

Но что если добавить заполнитель с текстовым описанием?

<div style="border: 2px solid #000; width: 100px; height: 100px;">
  <!-- Заполнитель, чтобы было понятно, что должно изображаться -->
  Описание изображения
</div>

Теперь рамка выглядит более информативной:

🖼 <- 🆘 (Здесь должно быть описание!)

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

SEO и оптимизация производительности

SEO лучше работает с <img> и атрибутом alt, это можно сравнить с приятной сладостью для сладкоежек. Для фоновых изображений на CSS можно:

• Добавить скрытый <img> с атрибутом alt.
• Обеспечить текстовое описание для доступности.

При этом не забывайте о производительности, чтобы загрузка страниц была максимально быстрой.

Лучшие практики использования ARIA и важность элемента IMG

• Не злоупотребляйте ARIA. Применяйте её только тогда, когда обычный HTML не достаточно информативен.
• Всегда имейте в запасе альтернативы для фоновых изображений. Напоминаем: элемент <img>.
• Стремитесь к тому, чтобы ваши изображения были максимально понятными и доступными.

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

1. Техники W3C для атрибута alt
2. Руководство по фоновым изображениям на MDN
3. Особенности работы с псевдоэлементами на CSS-Tricks
4. Значение альтернативного текста на WebAIM
5. Обсуждение на Stack Overflow: когда лучше выбирать IMG вместо фонового изображения в CSS
6. Чеклист по доступности на A11Y Project для изображений и анимаций