Writing Great Alt Text

Editor's Notes

1. alt text is so simple that it's surprising how erratically it's implemented and how often it's only in places where it's not really needed.
2. "I know it's an ad because it reads all this junk to me"
3. They ask for the information at the wrong time, and in the wrong way.
4. Is is content or code? It's content inside code. Web developers don't know what to write, because they may not even see the image. Art directors may not know how the image will be used when they add it to the library
5. Back to our regularly scheduled programming – how to write alt text.
6. If you are looking for code examples, this is a great place.
7. figcaption will replace or work with alt text few browsers support it yet
8. But today, I'd like to put aside the technical analysis a little bit, and just look at this from a writer's point of view. We'll start with some principles
9. If you are talking to chemists, the name of a compound may be all they need in the alt. But they would also know that DEADCAT is just slang for a group of compounds, and not unique. (This example came from a workshop, where one of the attendees managed an annual scientific report with hundreds of chemical diagrams in an appendix. He thought he would have to describe them. Even though the general public might read the report, they would be unlikely to read the appendix unless they had some chemical knowledge.)
10. Which of these things are important Which should be voiced or described?
11. Well.... it's photo of a fox. A red fox. Looking over it's shoulder at the camera. What should we describe about this images?Fox Red fox Red fox at Sachuest Point National Wildlife Refuge A red fox, standing alone on a pile of rocks, looks back at the camera.
12. Don't
13. Because this might mean "share on Facebook" Don't need to say "Go to" because that's implied in the link
14. It's especially true when the thumbnail is a miniature version of the full illustration on the linked article.
15. Big debate on WebAIM about this – is this just noise, or meaningful. On UXPA's magazine we went with the first option. But I believe you should not "null" this image, as it is important to the sense of this profile page.
16. In this case, there is a caption that provides some of the information, but other useful information is hidden in the alt text, and some is duplicated
17. This is often a problem when images come from image libraries or other databases. This one is particularly bad because if it was just the alt text it would hide information. The other mistake is to repeat the headline of the article in the image.
18. Is the image style important?
19. Alt text is too important to leave to random coding. Even if you write your own HTML, think about the alt text as you draft the article.
20. The nice thing is that each time you get it right, you add a tiny bit of goodness to the web