Html alt background image

CSS background image alt attribute

He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text. Question: I have a site that is displaying many of its images as background images using to size them to completely fill the element while cropping off any parts of the image that don’t fit.

CSS background image alt attribute

This is one I have not had to tackle before. I need to use alt tags on all images in a site including those used by CSS background-image attribute.

There is no CSS property like this as far as I know, so what is the best way to do this please?

background images sure can present data! In fact, this is often recommended where presenting visual icons is more compact and user-friendly than an equivalent list of text blurbs. Any use of image sprites can benefit from this approach.

It is quite common for hotel listings icons to display amenities. Imagine a page which listed 50 hotel and each hotel had 10 amenities. A CSS Sprite would be perfect for this sort of thing — better user experience because it’s faster. But how do you implement ALT tags for these images? Example site.

The answer is that they don’t use alt text at all, but instead use the title attribute on the containing div.

According to the W3C (see links above), the title attribute serves much of the same purpose as the alt attribute

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a «tool tip» (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:

• nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images
• some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what’s on your page
• search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won’t miss important sections of your pages.

In this Yahoo Developer Network (archived link) article it is suggested that if you absolutely must use a background-image instead of img element and alt attribute, use ARIA attributes as follows:

The use case in the article describes how Flickr chose to use background images because performance was greatly improved on mobile devices.

I think you should read this post by Christian Heilmann. He explains that background images are ONLY for aesthetics and should not be used to present data, and are therefore exempt from the rule that every image should have alternate-text.

CSS background images which are by definition only of aesthetic value – not visual content of the document itself . If you need to put an image in the page that has meaning then use an IMG element and give it an alternative text in the alt attribute.

As mentioned in other answers, there is no (supported) alt attribute for a div tag only for the img tag.

The real question is why you need to add the alt attribute to all background images for the site? Based on this answer, it will help you determine which route to take in your approach.

Visual/Textual: If you are simply attempting to add a textual fall back for the user if the image fails to load, simply use the title attribute. Most browsers will provide a visual tool tip(message box) when a user hovers over the image, and if the image is not loaded for whatever reason, it behaves the same as an alt attribute presenting text when image fails. This technique still allows for the site to speed up load times by keeping images set to backgrounds.

Screen Readers: The middle of the road option, this varies because technically keeping your images as backgrounds and using the title attribute approach should work as hinted above, «Audio user agents may speak the title information in a similar context.» However this is not guaranteed to work in all cases, including some readers may ignore it all together. If you end up opting for this approach, you can also try adding in aria-labels to help ensure screen readers pick these up.

SEO/Search Engines: Here is the big one, if you were like me, you added your background images, all was good. Then months later the customer(or maybe yourself) realized that you are missing out on some prime SEO gold by not having alt’s for your images. Keep in mind, the title attribute does not have any weight on search engines , from my research and as mentioned in an article here: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly/. So if you are aiming for SEO, then you will need to have an img tag with the alt attribute. One possible approach is to just load very small actual images on the site with alt attributes, this way you get all the SEO and don’t have to readjust the existing CSS in place. However this may lead to additional load time depending on the size and google does indeed look at the images path when indexing. In short if you are going this route, just accept what has to be done and include the actual images instead of using backgrounds.

How to make background-image accessible?, If you’re making the image a background in order to leverage background-size to proportionally scale the image to fit or fill it’s container, you can use both an img and background-image as I’ve described here: How to add alt text to background images?Making background images accessible.. As others have …

How to add alt text to background images? Making background images accessible

I have a site that is displaying many of its images as background images using background-size: cover to size them to completely fill the element while cropping off any parts of the image that don’t fit.

The problem is that these images are NOT purely decorative. They are a critical part of the informational content of the page. This means they need alt text in order to be accessible to screen readers and other assistive technologies.

What is the most semantic way to add alt descriptions to background images?

The most semantic way to make a background image accessible is to use both a background image and a regular img tag as well.

1. Place the img within the element with the background image.
2. Visually hide the img so that sighted users just see the background image behind it, but users with assistive technologies are still presented the img .

Note: just setting the image to display: none; will hide also it from assistive technologies, which isn’t the goal. A different approach is needed.

If you’re using Bootstrap, it has a handy built-in class for doing just this: .sr-only . If you’re not, you can add the styles for that class to your own stylesheet:

Applying this technique to the example above looks like this:

Edit: The object-fit property eliminates the need for the background image, but at the time of writing this property is not fully supported in IE or Edge.

The W3C provide an exemple for this context, simply provide a role=»img» to the div and an aria-label with your description.

More informations here : http://mars.dequecloud.com/demo/ImgRole.htm

This means they need alt text in order to be accessible to screen readers and other assistive technologies .

You perfectly right to point out that users may use assistive technologies which are not screen readers. Also, any method using sr-only CSS class must not be used as the sole way to ensure that the textual information may be accessed to every user.

For instance, people with low vision may want to discard all images which would appear blur and display their text alternative instead.

The object-fit property works for images since Edge 16 so it’s no longer a problem for 92% of browsers, and a fallback can be provided for older browsers.

Div background image not showing then display image, ProductThumbnail.Style.Add («BACKGROUND-IMAGE», «url (» + Item.ThumbnailUrl.Replace («~», «..») + «)»); What I want is in case if div background image url is not showing any image than in that case Imagealt will shows alt text which I set from back-end and in case if div background image url is showing …

How to add TITLE and ALT to an background image (CSS Sprites)?

In my project I had used CSS sprites as there was lots of images,now our SEO team was saying that images should have ALT and TITLE tag. I know Title & ALT can’t be added on the background. So they come up with an idea that put an transparent image in html over those images in background, but it seems very illogical to me(If the image is not relevant with the keyword, then how does it matter). So please help me with this, what is the best practice for this with very logical reason in support of your answer? so I can handle the SEO team.

I would say do not use transparent images since earlier versions of IE do not support them nicely. You will see black blocks. But this is avoidable with some javascript hacks.

If they are just background images that don’t add to the meaning of the site, keep it as just a background image, but if the image adds meaning to the site you should really use img tags and use alt tags as they suggest. Alt tags help with SEO.

Источник

Атрибуты alt и title для background изображения

Подскажите, как добавить атрибуты alt и title к изображению, которое выводится с помощью стиля background:?

Ссылка на комментарий

Поделиться на других сайтах

4 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

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

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник