What is good alt text to use?

#1

Question

For step 1 of this exercise, is “A photo of a brown bear’s head” good alt text to use?

Answer

This text certainly is descriptive and you are off to a great start here! With few exceptions, we generally want to avoid phrases like “photo of…”, “graphic of …”, “image of …” with our alt attributes as this information is usually redundant. I would recommend the more concise yet sufficiently descriptive alt value of “Brown Bear”.

For more information on how to create great alternative text, take a look at these examples.

20 Likes
FAQ: Learn HTML - Intro to HTML - Image Alts
#2

Why doesn’t the alt text display itself along with the image? How do we make the text accompanying the image visible for a normal web reader?

2 Likes
#4

Start here…

https://www.w3.org/WAI/

Track down what the real use of alternate text is. It is important to not abuse it for SEO purposes or leverage it for marketing purposes. Let it be a concern of well-formedness rather than the bottom line.

Until one understands the need for accessibility, all the remaining explanations are meaningless. Why even use the alt="" attribute? Just for show?

Alternate text is meant for people and user agents who/which literally cannot see. Blind people are blind. So too are search robots. Search engines are blind and use the data surrounding an image to give it some idea of how to index the image. The alternate text is the most specific since it is in the same tag as the src attribute. They must be connected is how a search engine will see it.

To a blind person, the alternate text does its best to describe the picture that the sighted user can see, in a brief phrase. The user will be able to browse the page and come across a descripton of an image then continue reading. If that description fits the context of what they are reading then it will be meaningfull and experiential. If not, well the experience could be less than pleasant and the page visit lost on the user. Accessibility means including everyone in the same relative experience.

37 Likes
#5

Excelente, bien explicado.

2 Likes
#6

My alt text read “a brown bear looks off wistfully into the distance” :joy:

12 Likes
#7

ALT text is objective, not subjective. We’re not writing or poem or narrating a drama. It is not the purpose of alternate text to denote tone or to emote, but to describe as simply as possible what is the principal object in the image.

3 Likes
#8

My alt tag for this was “A very cute brown bear. It’s looking right at the camera. What are you doing? You need to get out of there! That’s a bear!”

Is that a good alt tag?

2 Likes
#9

No, it is far to subjective. ALT text must be explicit, concise and objective. We would only use adjectives that are critical, such as brown bear as opposed to black bear, etc. We would never narrate and only use verbs that are also critical to the objectivity. Eg. brown bear sitting on honches.

An unsighted person is not very likely to be standing that near to a dangerous wild animal. This is superfluous narration.

8 Likes
#12

he said it for fun .-.

5 Likes
#13

not sure if i done something wrong or it sais its right but where does the description go

img%20alt%20pic
img alt pic.jpg3840×2144 497 KB

#14

The URL is not alternate text, but the src attribute value.

alt="Some text to describe the picture"
#15

I think I have done what this task requires me to do, but I can’t see the Alternative text coming out. Is this normal or shall I be able to see the text? Thank you very much!

HTML%20Page14
HTML Page14.jpg960×720 60.5 KB

#16

Alternate text only displays while waiting for the image to download. Then it is hidden. MS browsers can see the text on mouseover (as a tooltip) but others do not (afaik). For those browsers we would put in an additional attribute, title="" which text will display as a tooltip in all browsers.

5 Likes
#17

Thank you very much!

1 Like
#18

why doesn’t my alt image text show on the screen?

#19

See the post above… ALT text does not display on mouseover in most browsers, only IE as far as I know. Edge may be different.

#20

excellent man! keep it up

2 Likes
#21

In short I can say that, they are useful when the picture doesn’t load due to certain issues!
Instead of blank space in front of you, an alternative text would atleast give you some information about the content.

I’d like to show another example for ease.

image
image.png700×700 31.6 KB

HAPPY CODING!

2 Likes
#22

Can the “src” and “alt” image attributes be used in the same paragraph/line?

#23

They are both meant to be used inside an img tag.

<img src="#" alt="short description of image">