Доступный сгенерированный контент

Функции для веб-страниц: Контент Альтернативный текст для сгенерированного контента
  • НЕ используйте content для передачи важного текста (ярлыков, состояния, инструкций) – храните его в DOM (WCAG F87). Аргумент об альтернативном тексте – это снижение вреда в случаях, когда декоративный элемент случайно несет смысл, а не лицензия.
  • Чтобы добавить альтернативный текст для программ чтения с экрана, используйте аргумент content. Пример: content: url(cloud.svg) / "Save";.
  • Используйте content: "text" / "";, чтобы программы чтения с экрана не озвучивали декоративный текст.
  • НЕ используйте пустой аргумент альтернативного текста для изображений – они уже являются презентационными по умолчанию. Пример неправильного варианта: content: url(cloud.svg) / "";.
  • НЕ используйте аргумент альтернативного текста для описания эмодзи, если описание не отличается от официального названия эмодзи. Например, не используйте content: "🎉" / "celebration";, но content: "🎉" / "Yay!"; использовать можно.

Используйте аргумент alt text, только если текст отличается от основного значения и ещё не присутствует в DOM. Пример неправильного кода:

HTML:

<button class="save">Save</button>

CSS:

button.save::before {
  content: url(cloud.svg) / "Save";
}

Программа чтения с экрана прочитает это как "Сохранить сохранить".