Thank you to everyone who attended my webinar/writing workshop last week, Quick Tips for Writing Meaningful Alt Text (Even If You’re Not a Writer). It was a huge group! We had such a fun time together and crowdsourced some pretty great alt text.
The webinar participants had some great questions, and you’ll find detailed answers below. For more information, you can access the webinar slides, CART transcript, and recording here: Quick Tips for Writing Meaningful Alt Text (Even If You’re Not a Writer).
You can also download our new Meaningful Alt Text for Pictures & Portraits eBook for more quick tips!
Q: What are the character limits for alt text?
There’s technically no limit, but that doesn’t mean there aren’t some practical implications. Of course, it’s best to keep your alt text short and sweet but longer alt text will not disappear into the void. The screen reader JAWS will pause after 150 characters and the user can press the down arrow key to continue to hear the next 150 characters. (And again, if you’re super wordy!)
Q: How long does alt text need to be?
Long enough that a person who is blind or low-vision has the same information that a sighted user would get from glancing at the picture. You don’t need every single tiny detail, but you don’t want to be vague either. If you are unsure whether your alt text is sufficient, do some user testing with people who are blind or have low vision.
Q: Should I use punctuation if I’m trying to keep things as short as possible
Please do! Screen readers pause appropriately for punctuation marks, so leaving them out can make a sentence more difficult to understand when its read. (Especially at the speed that most people set their screen readers! Seriously, if you know someone who uses one, ask to listen. It blew my mind the first time.)
Q: How do you make the call over what is a decorative image vs. an informative one?
Context, context, context. Some things are an easy call, like a patterned background or border. For others, you want to ask yourself: how important is this image to the message of the surrounding text? Is the information fully explained in the text (making alt text redundant)? More on Decorative Images (with examples) is on the W3C’s tutorial page.
Q: Do you need to mention colors since people who are blind can’t see color?
Blindness comes in many variations and can affect people at different times in their life. Those who can see (or have seen) color may find that information useful in alt text. There are also sighted users of screen readers. A survey by WebAIM in 2017 revealed that nearly 25% of screen reader users rely on visual content at least some of the time.
Q: If there is text in the image, should it be included in the alt text?
Yes – if it’s not written in text elsewhere nearby. The W3C’s Alt Decision Tree is helpful in these scenarios. This is very important for functional images — images that are part of links or buttons. If your image has a call to action on it, then that call to action should be part of the alt text. People using voice recognition software like Dragon Naturally Speaking are likely to speak that call to action (“Click Add to Cart”), and if it isn’t represented in the alt text, it makes it much harder to activate.
Q: Do you specify if something is an illustration or vector rather than a photo?
If it is relevant, yes. As an example, we often use an illustration of the scales of justice for articles in our blog related to legal issues. It is largely a decorative image, so we do not call out that it is an illustration and not a photo of actual scales. We just call it “Scales of Justice” and move on.
Q: If you have a caption, do you need alt text as well?
If the caption fully describes the picture, then alt text is not required because it would be redundant. However, there may be parts of the image that are obvious to sighted users (thus, not needed in the caption) but need to be called out in the alt text for people with visual disabilities.
The Human Factor
Q: Should race be mentioned in alt text? What about gender? What about age?
This, my friends, is a tricky subject and there’s no one answer that is going to make everyone happy.
As with most things related to alt text, this comes down to context. There are times when factors of race, gender, or age are relevant to the information the image is providing. For example, in the webinar, we used this photo of a doctor helping an older patient access health records via an iPad.
If the goal of that website is to encourage older patients to ask for help accessing their online health records, then it is relevant that the patient is a senior.
Is it relevant that the doctor is African-American? Or that she is a woman? Given the context, this may not be the most important information in this particular photo. (And it’s always possible the doctor identifies as non-binary. Like I said, this is a tricky subject!)
- If you are using stock images, you can use the gender, race, or age keywords given by the photographer.
- If you’re using images of people you know, ask them their preferred pronouns and other ways they self-identify. (It’s the only way to get the right answers!)
- Otherwise, you can write around it all by using job titles (doctor/patient, professor/student, etc).
Q: How would you write alt text for a collage?
Groups of images can be consolidated into one alt text for the group, for example, “Smiling summer campers holding up their completed arts and crafts projects.”
Q: If an image is rotating, does it need alt text at different points in the rotation (front, side, back)?
Possibly, yes! This all depends on context as well. Let’s think of a case where it might make sense: a rotating image of a product on an e-commerce website. If the front shows that the denim vest has three buttoned pockets and that back shows the jacket has a large embroidered set of angel wings on it, people would want to know! If the vest is fully described in a product description on the page, it might be enough to just include the basics in the alt text (alt=”rotating image of the vest”) just so that people that can’t see the page know that there’s an image there and what it represents.
Q: What about image maps? How do you do alt text for those?
The short version is that you include alt on the <area> element for each clickable region of the image map. The W3C has a page on image maps that can get you started.
Q: How do you write alt text for graphs, charts, and other displays of data?
The Social Security Administration’s guide has fantastic advice on graphs and charts. Go check it out because nobody explains it better than Pastel the guide dog. This information starts on page 10.
Q: What if the image is part of an educational text and the subject is new to the reader?
In that case, the text on the page will likely do most of the heavy lifting. The alt text is there to fill in the blanks or draw attention to a particular part of the image. For example, “Human lungs, with a close-up of the alveoli, which look like pink raspberries.” (While you may have students who have never seen a raspberry, if they have eaten one, they have felt the texture.)
Q: What about online quizzes, where a student has to answer a question based on the image? The alt text would give away the answer.
If we take the example from the question above, the alt text on an online assessment could be, “Parts of the human lung that look like pink raspberries.” Or, this may be a case where that particular student could show their mastery of the subject in another way.
Microsoft Office Products & Alt Text
Q: What about alt text in Microsoft Word? Are there any differences in how you handle decorative images or images that don’t need alt text because they’re explained in the document?
Yes, in certain circumstances. One technique we often use for complex images that are explained in the document is to create a reference for people so they know where it is described.
In the document, we might create a full description like this: “Figure 12 shows the relationship between the divider and the stopped dado where you can see how these parts fit together. Notice on the left side that we see…” Then it can be valuable for the alt text for the image to be “Figure 12” rather than marking the image as decorative. This can help create a relationship between the image and the description in the text.
Q: Is it okay to leave the Title field empty as long as you complete the description field?
This tells me you’re not using Office 365! In Office 365, there is no longer a title field and description field – you get a description field and a checkbox that says, “Mark as decorative.” This makes things much clearer.
If you’re using an older version of Word, most people do just as you suggested – put your text alternative into the description field and leave the title out. There’s a lot of history with this, but it comes down to greater compatibility with assistive technology and better for a PDF export. If you want the full details, go check out Terrill Thomson’s great post: Alt text in Word: title vs description.
Got More Questions about Alt Text?
Leave us a comment below if you have more questions about alt text! We’ll be happy to answer them for you.