How long or detailed should our alternative text be?

Question

How long or detailed should our alternative text be?

Answer

Alt attributes should be accurate and as sufficient as possible. Usually, a few words will be descriptive enough but occasionally a sentence or two will be more appropriate.

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

14 Likes

Does it always have to be double quotes when we are writing anything inside a tag, can we use single quotes as well?

3 Likes

The general practice is double quotes when we hand write the code, but when generating code the circumstances will dictate. Personally, I always use double quotes on attributes and generate HTML strings with single quotes.

'<div class="something">content</div>'

or,

`<div class="${classname}">${content}</div>`
14 Likes

Double quote is recommended, because we use single quote as punctuation when writing English sentences as well. That will end your quote unexpectedly.
For example ‘It’s a Brown Bear!’ as opposed to “It’s a Brown Bear!”. I the first sentence your HTML quote will end with just ‘It’, because it got confused.

18 Likes

This example says to use alt=“” in the case that the surrounding content describes the image because we must always have an alt attribute for our image, that didn’t appear to be the case upon going through the exercises. Can someone clarify this for me?

It’s all about accessibility. Alternate text is not for sighted users, but users of assistive technology that renders in a usable form.

An alt Decision Tree | Web Accessibility Initiative (WAI) | W3C

Thanks for answering my question! This I totally understand, but in the case of this example it was using a null value for the alt attribute (for the sake of addressing redundancy) and I’m curious as to how that helps accessibility. Is it a case of good practice to include a null value for alt as opposed to leaving it out entirely, perhaps?

It’s been so long since I learned about accessibility that the reasoning escapes me, just now. The WAI/WCAG are set upon the attribute being present at all times, whether empty or not. When it is empty the user should be able to get some context from the surrounding text, and if it is only for the sake of visual dressing it should never have text, just the attribute.

From the Decorative Images article,

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

The empty alt value, alt="" does convey information, but only in so much as it means the image has no information to impart.

6 Likes

Ah okay, thank you so much! This is super helpful.

1 Like

Why are AI generated responses unreliable?

AI tools cannot reliably distinguish between biased material and unbiased material when using information to construct their responses .

1 Like

just wondering the significance of “#” in the alt attribute, some times its being used and omitted in others. Why?