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.
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.
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.
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?
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.