Html alt text on div

HTMLImageElement.alt

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

Это может произойти из-за ошибки,потому что пользователь отключил загрузку изображений,или потому что изображение еще не закончило загрузку.

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

Подумайте об этом так: выбирая alt строки для изображений, представьте, что вы скажете, читая страницу кому-то по телефону, не упоминая, что на странице есть изображение.

Альтернативный текст отображается в пространстве, которое занимает изображение, и должен занимать место изображения без изменения смысла страницы .

Value

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

alt атрибут официально обязательный; это должно быть указано всегда. Если изображение не требует резервной копии (например, для изображения, которое является декоративным или значком с рекомендацией минимальной важности), вы можете указать пустую строку ( «» ). По соображениям совместимости браузеры обычно принимают изображение без атрибута alt , но вы должны попытаться выработать привычку его использовать.

Usage notes

Основным правилом для атрибута alt является то, что альтернативный текст каждого изображения должен иметь возможность заменять изображение без изменения смысла страницы . Никогда не используйте alt для текста, который может быть истолкован как заголовок или заголовок. Для этих целей предназначены отдельные атрибуты и элементы.

Examples

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

Decorative images

Для изображений, не имеющих семантического значения — например, исключительно декоративных — или имеющих ограниченную информационную ценность, атрибуты alt должны быть установлены на пустую строку ( «» ). Это показано в примере ниже.

HTML

class="container"> div class="left-margin"> img src="/files/16861/margin-flourish.svg" alt=""> div> div class="contents"> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu. p> div> div> 

CSS

CSS для этого примера устанавливает стили для макета,как показано в результате ниже.

body < margin: 0; padding: 0; > p < margin-block-start: 0; margin-block-end: 1em; margin-top: 0; margin-bottom: 1em; > .container < width: 100vh; height: 95vh; font: 16px Arial,Helvetica,sans-serif; > .left-margin < background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; > .left-margin img < width: 6em; > .contents < background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; >

Result

Изображения,используемые в качестве кнопок

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

li class="toolbar" aria-role="toolbar"> a href="songs.html" aria-role="button">img src="songicon.svg" alt="Songs"a> a href="albums.html" aria-role="button">img src="albumicon.svg" alt="Albums"a> a href="artists.html" aria-role="button">img src="artisticon.svg" alt="Artists"a> a href="playlists.html" aria-role="button">img src="playlisticon.svg" alt="Playlists"a> li> 

Изображения,содержащие диаграммы или карты

Когда изображение содержит информацию, представленную в виде диаграммы, диаграммы, графика или карты, alt текст должен предоставлять ту же информацию, по крайней мере, в сводной форме. Это верно независимо от того, находится ли изображение / me в растровом формате, таком как PNG или JPEG, или в векторном формате, таком как SVG .

• Для карты alt текст может указывать направление к месту, указанному на карте, аналогично тому, как вы бы объяснили это устно.
• Для диаграммы текст может описывать элементы диаграммы и их значения.
• Для диаграммы текст может быть объяснением концепции,представленной на диаграмме.

Имейте в виду, что любой текст, включенный в диаграммы и диаграммы, представленные в формате SVG , может быть прочитан программами чтения с экрана. Это может повлиять на решения, которые вы принимаете при написании alt текста для диаграммы.

Значки или логотипы

В логотипах (например, логотипах компаний или брендов) и информационных значках следует использовать соответствующий текст в своих alt строках. То есть, если изображение является корпоративным логотипом, alt текстом должно быть название компании. Если изображение представляет собой значок, представляющий статус или другую информацию, текст должен быть названием этого состояния.

Например, если изображение представляет собой значок, который отображается на странице, чтобы указать, что содержимое страницы новое и было недавно обновлено, соответствующий alt текст может быть « Updated Recently» или даже « Updated on 27 August 2019″ .

В этом примере изображение звездообразования со словом «New!» используется, чтобы указать, что статья посвящена чему-то новому (и, вероятно, предположительно также захватывающему). alt атрибут установлен в New Page! чтобы этот текст отображался вместо изображения, если изображение недоступно. Он также доступен для чтения с помощью программ чтения с экрана.

HTML

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

class="container"> img src="https://www.bitstampede.com/mdn-test/new-page.svg" alt="New Page!" class="pageinfo-badge"> p class="contents"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu. p> div> 

CSS

Основная особенность CSS здесь — использование clip-path и shape-outside для привлекательного обтекания текста вокруг значка.

.container < max-width: 500px; > .pageinfo-badge < width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); > .contents < margin-top: 1em; font: 16px Arial,Helvetica,Verdana,sans-serif; >

Result

Other images

Изображения, показывающие объекты или сцены, должны иметь alt текст, описывающий то, что видно на изображении. На фотографии желтого чайника для атрибута alt буквально может быть установлено значение « A yellow teapot» .

Specifications

Источник

Возможно ли использовать alt или title для div

Подскажите, пожалуйста, возможно ли использовать alt или title для div аналогично как и для img ? Я использую div с изображением через background-image, стоит вопрос о назначении описания этого изображения для SEO-целей — для img я бы использовал alt и/или title — а вот в случае div ? Возможно ли это ? На сайте более 60000 картинок, но они не индексируются поисковиками. Спасибо)

Banned

• Регистрация: 24.02.2013
• Сообщений: 1,219
• Записей в дневнике: 1

• Репутация: 332
• Webmoney BL: ?

Сообщение от dandystore

Гуру

• Регистрация: 30.04.2011
• Сообщений: 1,064

• Репутация: 268
• Webmoney BL: ?

Сообщение от dandystore

Подскажите, пожалуйста, возможно ли использовать alt или title для div аналогично как и для img ? Я использую div с изображением через background-image, стоит вопрос о назначении описания этого изображения для SEO-целей — для img я бы использовал alt и/или title — а вот в случае div ? Возможно ли это ? На сайте более 60000 картинок, но они не индексируются поисковиками. Спасибо)

Спасибо сказали:

Гуру

• Регистрация: 20.01.2013
• Сообщений: 720

• Репутация: 189
• Webmoney BL: ?

dandystore,у вас это фон а не картинки получается. Чтобы задать alt и title изображения должны быть вставлены через тег img. Бэкграунды из css понятное дело не индексируются поисковиками.

Во все тяжкие

• Регистрация: 14.06.2011
• Сообщений: 2,325

• Репутация: 2030
• Webmoney BL: ?

если кратко:
по тегу alt

по тегу title

Источник

Alternate text for background images
Considerations and techniques

Avoid presenting informational images in CSS backgrounds

If your image contains important information for the end user, then it should be provided in an HTML tag with proper alt text. The CSS Spec says this:

Can’t avoid using CSS images or want to alt text for «non-important» ambient photos etc?

When providing alternate text for the CSS image, there are number of considerations

So do not put the CSS background image inside a that contains any content. It’s best to use an empty and an aria-label with role=»img»

Do this:

What if the author has to have a CSS image on a div that contains content

Sometimes there are dependencies in the CSS stack and messing with it can cause upset the design and layout of the site, or a request to change the code could get hung up in approval from various stakeholders. In cases where the author has to have the background image in the