Alt-text tips you probably don't know
I happened on a couple of articles about writing better image alt-text on my reading page, so I'd like to share the links and list some of the things I didn't know and you might not, either.
Alt-texts: The Ultimate Guide (via
alisx)
Alternative Text (via
jesse_the_k)
Alternative text generally refers to the contents of the alt attribute of the image tag in HTML:
In Markdown it is the portion that goes in the square brackets after the exclamation mark.
Either would result in this image:
And, if the image is missing or the user is browsing with a text-only browser, screen reader etc., it would result in the following text:
Clear, helpful alternative text is crucial to accessibility. So what makes for a good alt text?
I thought I was pretty conscientious about alt-text use, but I still learned new information and tips from these resources and you might find them helpful as well.
- More than the alt attribute: In addition to the alt attribute, alternative text can be provided in descriptions in the surrounding text.
- "At a glance" test: The text in the alt attribute should provide the information that a sighted user of a graphics browser can get at a glance of the image. You can't get a character's entire life story, the photographer's name, the date the picture was taken, etc. etc. from a glance, so you wouldn't put it in the alt attribute. Needless to say search optimization keywords don't belong in there, either.
- Don't say "Image of..." "Photo of..." I admit I've been guilty of this, but both articles point out it's redundant and unhelpful.
- End with a period! Period. I keep forgetting this one, but ending with a period makes screen readers pause after the alt-text and makes for a more pleasant browsing experience.
- Context is everything. The alt text of an image inserted into an article about photography would have a description focusing on the photographic properties of an image, while the alt text of the same image about a television show would describe which character is in the image, played by what actor and so on.
- Know when not to use them. If the content of the image is provided in the surrounding text (such as text labels) and the image doesn't have a separate function, such as a link or button separate from any text labels, the alt can be left blank. Repeated images and decorative images also do not require alt text.
- Don't bother with the title attribute. Some interfaces provide a title entry option, but the Axess Lab article says it's useless: "Nobody uses them - they don’t work on touch screens and on desktop they require that the user hovers for a while over an image, which nobody does. Also, adding a title-text makes some screen readers both read the title-text and the alt-text, which becomes redundant. So just don’t add a title-text." For similar reasons of compatibility and usability, the Alternative Text article advises that longdesc attribute should also not be relied on.