Alt-text tips you probably don't know

[ljwrites]

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:

<img src="https://i.postimg.cc/G4QC858h/ace-attorney.jpg" alt="Close-up of Phoenix Wright's face.">

In Markdown it is the portion that goes in the square brackets after the exclamation mark.

![Close-up of Phoenix Wright's face.](https://i.postimg.cc/G4QC858h/ace-attorney.jpg)

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.

Comments

Excellent synthesis!

[jesse_the_k]

Thank you--I'm editing my post for this.

Re: Excellent synthesis!

[ljwrites]

Thanks! After seeing the first link I kept thinking, "I need to make a summary post" and then you posted the second and I was like "I HAVE TO MAKE A SYNTHESIS POST."

(Also I must thank you forever for your Markdown posts. I went from "Pfft why do I need this I'll have you know my HTML is Flawless but I'll give this...what? DumbedDown? a try just for the lulz" to "Where have you been my entire life and how did I ever journal without you??")

Re: Excellent synthesis!

[jesse_the_k]

I'm a synthesis-first thinker, and I have to tear things apart to work against that tendency when writing how-tos.

I'm so happy Markdown has been a good experience for you. I long ago created keyboard macros (Typinator) for my bread-and-butter HTML, but Gruber's goal is well-served by Markdown. The format does get out of the way and I can write.

Thanks!

[brainwane]

Thank you so much for this! I read your summary and what you linked to, and now I feel much better prepared to add proper alt text!

Re: Thanks!

[ljwrites]

Omg I'm so happy I was helpful!