Атрибут alt фонового изображения CSS

Это та проблема, с которой мне раньше не приходилось сталкиваться. Мне нужно использовать теги alt для всех изображений на сайте, включая те, которые используются атрибутом CSS background-image.

Насколько я знаю, такого свойства CSS не существует, так как лучше всего это сделать?

Фоновые изображения, безусловно, могут представлять данные! Фактически, это часто рекомендуется, если представление визуальных значков более компактно и удобно для пользователя, чем эквивалентный список текстовых объявлений. Любое использование спрайтов изображений может выиграть от этого подхода.

Иконки со списком отелей часто отображают удобства. Представьте себе страницу, на которой перечислено 50 отелей, и в каждом отеле 10 удобств. CSS Sprite идеально подходит для такого рода вещей - лучший пользовательский интерфейс, потому что он быстрее. Но как реализовать теги ALT для этих изображений? Пример сайта .

Ответ заключается в том, что они вообще не используют altтекст, а вместо этого используют titleатрибут в содержащем div.

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

Согласно W3C (см. Ссылки выше), атрибут title во многом служит той же цели, что и атрибут alt.

заглавие

Значения атрибута title могут отображаться пользовательскими агентами различными способами. Например, визуальные браузеры часто отображают заголовок как «всплывающую подсказку» (короткое сообщение, которое появляется, когда указывающее устройство останавливается над объектом). Аудио пользовательские агенты могут озвучивать информацию заголовка в аналогичном контексте. Например, установка атрибута для ссылки позволяет пользовательским агентам (визуальным и невизуальным) сообщать пользователям о природе связанного ресурса:

альт

Атрибут alt определяется в наборе тегов (а именно, img, area и, необязательно, для ввода и апплета), чтобы вы могли предоставить текстовый эквивалент для объекта.

Текстовый эквивалент приносит следующие преимущества вашему сайту и его посетителям в следующих типичных ситуациях:

• в настоящее время веб-браузеры доступны на очень большом количестве платформ с очень разными возможностями; некоторые не могут отображать изображения вообще или только ограниченный набор типов изображений; некоторые можно настроить так, чтобы изображения не загружались. Если в вашем коде установлен атрибут alt в изображениях, большинство этих браузеров будут отображать приведенное вами описание вместо изображений.
• некоторые из ваших посетителей не могут видеть изображения, будь то слепые, дальтоники или слабовидящие; атрибут alt очень помогает тем людям, которые могут полагаться на него, чтобы иметь хорошее представление о том, что на вашей странице
• Боты поисковых систем относятся к двум вышеупомянутым категориям: если вы хотите, чтобы ваш сайт был проиндексирован так, как он того заслуживает, используйте атрибут alt, чтобы убедиться, что они не пропустят важные разделы ваших страниц.

В этой статье Yahoo Developer Network ( заархивированная ссылка ) предлагается, что если вам абсолютно необходимо использовать фоновое изображение вместо элемента img и атрибута alt, используйте атрибуты ARIA следующим образом:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

Пример использования в статье описывает, как Flickr решил использовать фоновые изображения, поскольку производительность на мобильных устройствах была значительно улучшена.

Я думаю, вам стоит прочитать этот пост Кристиана Хейльмана. Он объясняет, что фоновые изображения предназначены ТОЛЬКО для эстетики и не должны использоваться для представления данных, поэтому на них не распространяется правило, согласно которому каждое изображение должно иметь альтернативный текст.

Отрывок (выделено мной):

Фоновые изображения CSS, которые по определению имеют только эстетическую ценность, а не визуальное содержание самого документа . Если вам нужно поместить на страницу изображение, которое имеет значение, используйте элемент IMG и дайте ему альтернативный текст в атрибуте alt.

Я с ним согласен.

Как упоминалось в других ответах, нет (поддерживаемого) атрибута alt для тега div только для тега img.

Реальный вопрос: зачем добавлять атрибут alt ко всем фоновым изображениям сайта? Основываясь на этом ответе, он поможет вам определить, какой маршрут выбрать в вашем подходе.

Визуальный / текстовый: если вы просто пытаетесь добавить текстовый откат для пользователя, если изображение не загружается, просто используйте атрибут title. Большинство браузеров предоставляют визуальную подсказку (окно сообщения), когда пользователь наводит курсор на изображение, и если изображение не загружается по какой-либо причине, оно ведет себя так же, как атрибут alt, представляющий текст, когда изображение не работает. Этот метод по-прежнему позволяет сайту ускорять время загрузки, сохраняя изображения в качестве фона.

Программы чтения с экрана: вариант посередине пути, это варьируется, потому что технически сохранение ваших изображений в качестве фона и использование подхода с использованием атрибута заголовка должно работать, как указано выше: «Звуковые пользовательские агенты могут озвучивать информацию заголовка в аналогичном контексте». Однако не гарантируется, что это сработает во всех случаях, в том числе некоторые читатели могут игнорировать все это вместе. Если вы в конечном итоге выберете этот подход, вы также можете попробовать добавить aria-label, чтобы гарантировать, что программы чтения с экрана уловят их.

SEO / поисковые системы: вот большой вопрос: если бы вы были похожи на меня, вы добавили фоновые изображения, все было хорошо. Спустя несколько месяцев клиент (или, возможно, вы сами) осознал, что вы упускаете часть лучшего SEO-золота из-за того, что не имеете альтернативных изображений для своих изображений. Имейте в виду, что атрибут title не имеет никакого значения для поисковых систем , согласно моему исследованию и как упоминалось в статье здесь: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /, Так что если вы стремитесь к SEO, вам понадобится тег img с атрибутом alt. Один из возможных подходов - просто загрузить на сайт очень маленькие фактические изображения с атрибутами alt, таким образом вы получите все SEO и вам не придется заново настраивать существующий CSS. Однако это может привести к дополнительному времени загрузки в зависимости от размера, и Google действительно смотрит на путь к изображениям при индексировании. Короче говоря, если вы идете по этому пути, просто примите то, что нужно сделать, и включите фактические изображения вместо использования фона.

Общее мнение состоит в том, что вы не должны использовать фоновые изображения для вещей со значимым семантическим значением, поэтому на самом деле нет правильного способа хранить альтернативные данные с этими изображениями. Важный вопрос: что вы собираетесь делать с этими альтернативными данными? Вы хотите, чтобы он отображался, если изображения не загружаются? Он нужен для какой-то программной функции на странице? Вы можете хранить данные произвольно, используя созданные свойства css, которые не имеют смысла (могут вызвать ошибки?) ИЛИ добавляя скрытые изображения, которые имеют изображение и тег alt, а затем, когда вам нужны фоновые изображения alt, вы можете сравнить изображение пути, а затем обрабатывайте данные, как бы вы ни хотели, используя какой-нибудь собственный скрипт для имитации того, что вам нужно. Я не знаю, как заставить браузер автоматически обрабатывать какой-то атрибут alt для фоновых изображений.

Классический способ добиться этого - поместить текст в div и использовать технику замены изображения.

<div class"ir background-image">Your alt text</div>

с background-image, являющимся классом, в котором вы назначаете фоновое изображение, а ir может быть классом замены изображений HTML5boilerplates, ниже:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

В этой статье W3C рассказывается, что, по их мнению, вам следует делать https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage.

и здесь есть примеры http://mars.dequecloud.com/demo/ImgRole.htm

среди которых

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

Тем не менее, если, как в приведенном выше примере, элемент, содержащий фоновое изображение, является просто пустым контейнером, я лично предпочитаю поместить туда текст и скрыть его с помощью CSS; прямо там, где вы показываете изображение:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

Вот мое решение этой проблемы:

Создайте новый класс в CSS и разместите его за пределами экрана. Затем поместите замещающий текст в HTML прямо перед свойством, вызывающим фоновое изображение. Может быть любой тег, H1, H2, pи т.д.

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

Мне непонятно, чего вы хотите.

Если вы хотите, чтобы свойство CSS отображало значение атрибута alt, возможно, вы ищете функцию атрибута CSS, например:

IMG:before { content: attr(alt) }

Если вы хотите поместить атрибут alt на фоновое изображение, то ... это странно, потому что атрибут alt является атрибутом HTML, а фоновое изображение - свойством CSS. Если вы хотите использовать атрибут HTML alt, я думаю, вам понадобится соответствующий элемент HTML, чтобы вставить его.

Почему вам «нужно использовать теги alt на фоновых изображениях»: это по семантической причине или по какой-либо причине визуального эффекта (и если да, то какой эффект или по какой причине)?

Вы можете добиться этого, поместив altтег в место div, где будет отображаться ваше изображение.

Пример:

<div id="yourImage" alt="nameOfImage"></div>