Это то, с чем мне не приходилось сталкиваться раньше. Мне нужно использовать теги alt на всех изображениях на сайте, включая те, которые используются атрибутом background-image CSS.
Как я знаю, такого свойства 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, чтобы убедиться, что они не пропустят важные разделы ваших страниц.
Я думаю, вы должны прочитать этот пост от Christian Heilmann. Он объясняет, что фоновые изображения являются ТОЛЬКО для эстетики и не должны использоваться для представления данных и поэтому освобождаются от правила, что каждое изображение должно иметь альтернативный текст.
Выдержка (акцент мой):
CSS-фоновые изображения, которые по определению имеют только эстетическую ценность - не визуальный контент самого документа. Если вам нужно поставить изображение на странице, имеющей смысл, затем используйте элемент IMG и дайте ему альтернативный текст в атрибуте alt.
Я согласен с ним.
В этой статье Yahoo Developer Network (заархивированная ссылка) предлагается, что если вам абсолютно необходимо использовать background-image вместо элемента img и атрибута alt, используйте атрибуты ARIA следующим образом:
<div role="img" aria-label="adorable puppy playing on the grass">
...
</div>
Вариант использования в статье описывает, как Flickr решил использовать фоновые изображения, поскольку производительность на мобильных устройствах была значительно улучшена.
Как упоминалось в других ответах, для тега div нет (поддерживаемого) атрибута alt только для тега img.
Реальный вопрос заключается в том, почему вам нужно добавить атрибут alt ко всем фоновым изображениям для сайта? Основываясь на этом ответе, он поможет вам определить, какой маршрут выбрать в вашем подходе.
Визуальный/текстовый: Если вы просто пытаетесь добавить текстовый запасной вариант для пользователя, если изображение не загружается, просто используйте атрибут title. Большинство браузеров предоставляют подсказку (окно сообщения), когда пользователь наводит курсор на изображение, и если изображение по какой-либо причине не загружается, оно ведет себя так же, как атрибут alt, представляющий текст при сбое изображения. Этот метод все еще позволяет ускорить загрузку сайта, сохраняя изображения на заднем плане.
Программы чтения с экрана: Параметр середины дороги, это варьируется, потому что технически сохранение ваших изображений в качестве фона и использование подхода атрибута заголовка должны работать, как указано выше, "Аудио агенты пользователя могут произносить информацию заголовка в аналогичном контексте". Однако это не гарантируется, что сработает во всех случаях, в том числе некоторые читатели могут игнорировать все это вместе. Если вы в конечном итоге выберете этот подход, вы также можете попробовать добавить метки aria, чтобы помочь читателям экрана подобрать их.
SEO/Поисковые системы: Вот большой, если вы были как я, вы добавили свои фоновые изображения, все было хорошо. Через несколько месяцев клиент (или, возможно, вы сами) осознали, что вам не хватает какого-то лучшего SEO-золота, поскольку у вас нет альтернативы для ваших изображений. Имейте в виду, что атрибут title не имеет никакого значения для поисковых систем, как показано в моих исследованиях: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. Поэтому, если вы стремитесь к SEO, вам понадобится тег img с атрибутом alt. Один из возможных подходов состоит в том, чтобы просто загрузить очень маленькие фактические изображения на сайт с атрибутами alt, таким образом, вы получаете весь SEO и вам не нужно перенастраивать существующий CSS на месте. Однако это может привести к дополнительному времени загрузки в зависимости от размера, и Google действительно смотрит на путь изображений при индексации. Короче говоря, если вы идете по этому пути, просто примите то, что должно быть сделано, и включите реальные изображения вместо использования фонов.
Но каждый образ не применяется в качестве фона, а как элемент разметки (<img... />) должен представлять атрибут alt (альтернативный текст), включая некоторый описательный текст или просто пустым (в случае декоративных изображений).
Для вопросов доступности это один из наиболее важных правил.
Классический способ добиться этого - поместить текст в div и использовать технику замены изображений.
<div class"ir background-image">Your alt text</div>
с фоновым изображением, находящимся в классе, где вы назначаете фоновое изображение, а 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%;
}
По общему мнению, вы не должны использовать фоновые изображения для вещей со значимым смысловым значением, поэтому на самом деле нет надлежащего способа хранения данных с этими изображениями. Важным вопросом является то, что вы собираетесь делать с этими данными alt? Вы хотите, чтобы он отображался, если изображения не загружаются? Вам это нужно для какой-либо программной функции на странице? Вы можете произвольно хранить данные, используя созданные свойства css, которые не имеют значения (могут вызывать ошибки?) ИЛИ путем добавления скрытых изображений с изображением и тегом alt, а затем, когда вам нужны фоновые изображения alt, вы можете сравните пути изображения, а затем обработайте данные, но вы хотите использовать какой-то пользовательский script, чтобы имитировать то, что вам нужно. Я не знаю, как заставить браузер автоматически обрабатывать какой-то атрибут alt для фоновых изображений.
Здесь мое решение этой проблемы:
Создайте новый класс в 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>
Эта статья от 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 отображало значение атрибута alt, возможно, вы ищете функцию атрибут CSS, например:
IMG:before { content: attr(alt) }
Если вы хотите поместить атрибут alt на фоновое изображение, то... это нечетно, потому что атрибут alt является атрибутом HTML, тогда как фоновое изображение является свойством CSS. Если вы хотите использовать атрибут HTML alt, я думаю, вам понадобится соответствующий HTML-элемент для его ввода.
Почему вам "нужно использовать теги alt на фоновых изображениях": это для семантической причины или для некоторой причины визуального эффекта (и если да, то какой эффект или какая причина)?
Вы можете достичь этого, поместив тег alt в div, появится ваше изображение.
Пример:
<div id="yourImage" alt="nameOfImage"></div>