Javascript img src alt

HTMLImageElement: alt property

The HTMLImageElement property alt provides fallback (alternate) text to display when the image specified by the element is not loaded.

This may be the case because of an error, because the user has disabled the loading of images, or because the image hasn’t finished loading yet.

Perhaps the most important reason to use the alt property is to support accessibility, as the alt text may be used by screen readers and other assistive technologies to help differently-abled users make full use of your content. It will be read aloud or sent to the touch device, for example, to support visually impaired users.

Think of it like this: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there’s an image on the page.

The alternate text is displayed in the space the image would occupy and should be able to take the place of the image without altering the meaning of the page.

Value

A string which contains the alternate text to display when the image is not loaded or for use by assistive devices.

The alt attribute is officially mandatory; it’s meant to always be specified. If the image doesn’t require a fallback (such as for an image which is decorative or an advisory icon of minimal importance), you may specify an empty string ( «» ). For compatibility reasons, browsers generally will accept an image without an alt attribute, but you should try to get into the habit of using it.

Usage notes

The fundamental guideline for the alt attribute is that every image’s alternate text should be able to replace the image without altering the meaning of the page. You should never use alt for text that could be construed as a caption or title. There are separate attributes and elements designed for those purposes.

Examples

Beyond that, there are additional guidelines for using alt appropriately which vary depending on what the image is being used for. These are shown in the examples below.

Decorative images

Images with no semantic meaning—such as those which are solely decorative—or of limited informational value, should have their alt attributes set to the empty string ( «» ). This is shown in the example below.

HTML

div 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

The CSS for this example sets up the styles for the layout as shown in the result below.

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); 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); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; > 

Result

Images used as buttons

For example, in the snippet of HTML below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used.

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> 

Images containing diagrams or maps

When an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form. This is true whether the /me image is in a bitmapped format such as PNG or JPEG or in a vector format like SVG.

• For a map, the alt text could be directions to the place indicated by the map, similarly to how you would explain it verbally.
• For a chart, the text could describe the items in the chart and their values.
• For a diagram, the text could be an explanation of the concept presented by the diagram.

Keep in mind that any text included in diagrams and charts presented in SVG format may be read by screen readers. This may impact the decisions you make when writing the alt text for the diagram.

Icons or logos

Logos (such as corporate or brand logos) and informational icons should use the corresponding text in their alt strings. That is, if an image is a corporate logo, the alt text should be the name of the company. If the image is an icon representing a status or other information, the text should be the name of that state.

For example, if an image is a badge that’s shown on a page to indicate that the content of the page is new and has been updated recently, the corresponding alt text might be » Updated Recently» or even » Updated on 27 August 2019″ .

In this example, a starburst image with the word «New!» is used to indicate that an article is about something new (and probably supposedly also exciting). The alt attribute is set to New Page! to allow that text to be displayed in place of the image if the image isn’t available. It is also available to be read by screen readers.

HTML

The HTML below creates a snippet of content from a site using the described icon. Note the use of the alt attribute on the , providing a good substitution string to use in case the image doesn’t load.

div 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

The main feature of the CSS here is the use of clip-path and shape-outside to wrap the text around the icon in an appealing way.

.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

Images showing objects or scenes should have alt text describing what’s seen in the image. A photo of a yellow teapot might literally have its alt attribute set to » A yellow teapot» .

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Есть ли способ обратиться к alt картинки?

Эти картинки картинки слайдера выводятся через админку, у них нет индификатора. только класс img-responsive. Но имеется разный альт, вот я и думаю если это возможно обращаться к картинкам через альт. Просто нужно каждой картинке задать разное действие.

$('body').find('img').each(function(i, event)< if($(this).attr('alt') == 'home') console.dir(event); >);

$('img[alt="home"]').attr('src'); // если нам нужен URL изображение

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

Да через идентификаторы правильнее, но у меня картинки с бд их там нет.Сделал у себя в скрипте console.log($(‘.img-responsive’).attr(«alt»));
Но получил альт только одной картинки — лого. Которая у меня в html прописана. А альт картинок с бд не получил, возможно этот способ не видит картинки с бд или не знаю.
Блин вот пока, писал. Перечитал ваг пост еще раз и подумал. А ведь я могу присвойть сам id картинкам через jquery. Только не помню как присваивать разные классы ( как то счетчиком можно типо такие id получить id1 id2 . idn). Пойду гуглить как это делается
Спасибо.

Хотя добавлю idтоже самое будет, куча разных Id. Но вообше у меня пока 3 баннера, так, что условие будет не страшно написать. Задача тут, «странная» согласен) Нужно, в зависимости какая картинка на слайдере, добавлять определенный текст или эффект. Вот поэтому нужен способ к разным картинкам обращаться, так как все остальное одинаково для всех 3 баннеров

Источник

Как показывать alt изображения текстом?

Вопрос банальный забыл как javascript / jquery заставляет показывать alt-«text» альтернативный текст на странице рядом с изображением простым текстом.

Спасибо Евгений Петров за решение и Алексей Николаев за обращение к здравому смыслу! Написал ещё одну похожую конструкцию для схожей задачи, может кому пригодится, вытягивает текст из title

$('img').each(function () < $(this).after($('').html($(this).attr('alt'))); >)

Как верно заметил @Heian, лучше alt использовать по его прямому назначению (ошибка при загрузке изображений). Тогда для замены таких изображений:

$('img').each(function () < if (this.readyState != 'complete') < $(this).on('error', function () < $(this).replaceWith($('').html($(this).attr('alt'))); >); > >);

Атрибут, отвечающий за замену незагрузившегося изображения текстом — alt (у тега img). Этого обычно бывает достаточно для замены. Однако если необходима более тонкая система, на помощь вам придут все возможности JS. Вы можете создать по событию error при загрузке изображения функцию, которая будет добавлять определенное описание (при помощи любого элемента), как вариант. Подобное описал @Petroveg в ответе выше.

Берёте div, с котором написан ваш alt-текст (можно задать стиль тексту). Поверх этого текста через z-index устанавливаете ваше изображение. Размеры div и img одинаковые. При загрузке изображения пользователь видит текст в div-е, после загрузки видит само изображение. Верстка не ломается. В принципе, можно даже написать небольшой скриптик реализующий это.

Имеется необходимость в просмотре кодов Emoji-смайлов в постах ВКонтакте. Например, вот пост:
vk.com/wall-124855981_31288
В коде страницы нужные нам коды записаны в атрибуты Alt. Через Tampermonkey запустил указанный выше скрипт:

$('img').each(function () < $(this).replaceWith($('').html($(this).attr('alt'))); >);

К сожалению, он не работает. Не подскажете, что нужно изменить в скрипте, чтобы вместо изображения показывался alt-«text»?
P.S. В javascript/jquery я полный ноль)

Источник