What is the purpose of alt in a <img /> tag?

Asked

Viewed 868 times

21

Studying on HTML5 I came across the property alt being used in tag <img />.

Example:

<img src="https://s-media-cache-ak0.pinimg.com/736x/9e/fd/27/9efd27afef4e8127923fbce92b8c967d--minions-minions-funny-minion.jpg" alt='Essa é uma imagem sobre Minions' />

I would like to know what the purpose of alt on a tag <img />, since, nothing visual is presented.

html html5

  • Marconi, break the link and see what appears in place ;)

  • Use 2 saint alt and title, if new browsers for mac, android and others, break link and if you say shorten? between http://goo.gl or http://imgur.com

  • It’s really a lot better people, thanks :)

  • Good if you liked shorteners, dispose ;-)

  • 1

    Here’s an example Marconi: https://jsfiddle.net/jmo802c9/

  • @Miguel vdd here msm in the company happens this cmg, I did not know that it was because of the alt that appeared this text, I thought it was the tooltip.

  • Yes, even when the connection is slow you can see on Facebook the description (alt) of the images before they even appear

  • @Miguel got it, Thanks for the link :)

  • tooltip has jquery ui and follows https://jqueryui.com/tooltip/ is beautiful!

  • 1

    alt is alternative, the main focus is to serve as fallback for chance the image does not load, however the searchers use to describe the content, similar to the title. So you don’t need title inside img, just use alt=

  • @Guilhermenascimento good, every hour learning a little more.

  • You can give an answer with just a few good comments you have here. :)

Show 7 more comments

2 answers

27


It is to put the description of what the image contains. It will be shown in place of the image if it cannot be displayed. Useful for:

  • facilitate content indexing, then serves for SEO,
  • show something informative if the browser does not load the image for some reason or is slow,
  • be able to inform something for those with visual impairment.

The latter is important because reading software for those who have visual difficulty can read what is written and "speak" to the person. There is no way (yet) to "tell" the person what the image is, you can only do this with a description.

Many people think that everything will always work, but there are several reasons why the image will not be displayed:

  • has browser that can not show the image, it is textual,
  • the browser can be set to not show images,
  • has network that may have lock on the location where has the image,
  • the image may cease to exist where it was and you do not realize,
  • there may be several errors in the middle of the process.

Do not use the space to put the image name or something not useful. The text should describe the image as best as possible to meet these requirements stated above. If necessary you can put a long text, but it is not always necessary, there is no need to make an artistic criticism of the image :). If there is conflict between objectives, do your best to serve the most important and try to help others.

No need to use if the image is merely decorative, use <alt = ""> In these cases, only images that are important for the general context of the page need this. Be sure to use this form so that the browser does not show something, so that it does not try to describe that there is an image there, which would actually only be useful for the page rendered in full.

The proper example is what is in the same question :) does not have much secret.

Documentation on the MDN.

Here on the site allows you to do this when you add image and few do it, this is bad and little inclusive.

Example:

Nene com um Fiat 147 todo detonado andando pelas ruas e frase "funcionar é diferente de star certo"

If the browser does not show tooltip see the source of this text with her description.

  • Sensational to see an answer like that. I found it interesting you highlight about the visually impaired, which was actually what motivated me to write the question. Thank you :)

8

In my opinion, the great importance of alt is in accessibility, including the W3C (World Wide Web Consortium) owns this slide on web accessibility.

There are some screen readers like ORCA, for Linux and JAMS for Windows, in this website has an explanation about them. Tagged alt This software informs disabled users what is in the image. This is why the main function of the tag is to provide an alternative description for the image.

If you are interested in learning more about web accessibility, I recommend reading the primer W3C.

Remember that small details like <img src="https://goo.gl/3pS3AU" alt='Essa é uma imagem sobre Minions' />, in your HTML make a big difference to disabled users.

  • 1

    I agree with you.

  • 1

    I will devote some time to this PDF in. :)

  • 1

    @Marconi, it’s worth it =)

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.