During Knowbility’s Images: Alternative Content for Accessibility webinar, there were attendee questions we didn’t have time to answer. Our team of experts answered these overflow questions and we’re sharing them with everyone!

Order of Headlines and Images

Question: Is there a best practice for the order of headlines and images? Should you list the headline, followed by the image description or the image description, followed by the headline?

Answers:

  • Alicia Evans: Best practice is to have the heading first. Otherwise, a person navigating by headings might miss the image. Anthony never seems to have a problem with this order, but he's a very experienced user.  

  • Anthony Vasquez: Yes, having the heading first is best practice. It seems that the Atlantic likes to place the image before the heading of it's main story at the top of the page. That does throw me off.

  • Eric Eggert: Structurally the heading usually is also a heading for the image, so having the headline before the image makes most sense to me, too.

Alt Text for Images Used in Different Contexts

Question: Sometimes images are used in several places throughout a website and the context might change (For instance, it may be a large featured image on one page, and a cropped thumbnail on another). How can we write alt text that accommodates that changing context?

Answers:

  • Alicia Evans: People tend to not like this answer, but the answer is generally that you need different alternative text for each instance. There's no one alt text value that will cover all different instances.

  • Eric Eggert: I agree. If you can, have multiple alternative texts. If that is not possible, the alternative text should be short and describe the image out of context, too.

  • Anthony Vasquez: As with lots of these issues, context matters. Keeping the original alt text of the image and adding "thumbnail" before it when used as a thumbnail would help with consistency.

  • Emily Lewis: Some CMSs already support multiple alt texts for images in different contexts. In WordPress, for example, you can add an image block and enter entirely different alt text for that particular instance – it doesn’t override the alt text of other instances of that same image elsewhere or even in the main Media Library. Other CMSs can be customized to do something similar.

Assigning Identity Information to People in Image Text Alternatives

Question: Please share best practice on assigning gender to people in images. To clarify these are not stock photos.

Answers:

  • Eric Eggert: If you decide to include gender (and there are many situations where it makes sense), include it everywhere where you know it to avoid accidentally playing into people’s biases. For example, some people might write “Woman doctor” but “Doctor” for a male-presenting person. (This stuff is complicated!) 

  • Alicia Evans: I would also add that whenever possible, ask the person pictured what pronouns they use. Don't guess gender or pronouns unless you can confirm from a person directly.

  • Emily Lewis: I also think this advice applies to any type of “identity” information, whether that is gender, racial, cultural or other ways people identify themselves.

Decorative Images in WordPress

Question: For decorative images, in WordPress do I add two quotation marks in the alt text box or do I just leave the alt text box blank?

Answer:

  • Alicia Evans: Leave it blank! Wordpress knows that an empty field means decorative. Test it for yourself. Leave the field empty and then check the code. You'll see a lone alt attribute with no value. This is a decorative image. alt and alt="" do the same thing.

Alt Text Length

Question: Please elaborate on Alt Text length: some sources cite a 140 character limit, while here I am hearing Anthony V. and Emily encourage lengthy entries. As a developer, I used to put quite a lot in Alt Text for the purpose of SEO optimization, since Google et al index Alt Text. Any other considerations?

Answers:

  • Eric Eggert: The alternative text should describe the image properly, if it must be longer to do that, then use a longer text. There is no limit, and there has never been one.

  • Alicia Evans: It's my understanding that alt attribute values cannot be paused. They can be skipped, but not paused and then continued. So if there is a longer description necessary, it's best to put the longer description on the page and visible to everyone rather than try to overstuff the alt attribute.

  • Anthony Vasquez: As far as I know, speech can be paused (then resumed) only with VoiceOver on iOS and MacOS. Otherwise, stopping speech means that I would hear a line or element starting from the beginning.

Alt Text for Linked (Functional) Images

Question: Would a combination of both descriptive and functional alt text be most useful. For example, “a clickable image of woman lying on a rock from the calf down wearing colorful shoes that will take user to a product page”?

Answers:

  • Eric Eggert: That would be too much information. Clickable, image, and that it is a link are announced by a screen reader. You should make it clear that it goes to the product page.

  • Emily Lewis: For functional images, front-load the purpose or destination – in this case, product page. Unless there is a very clear reason to, you don’t need to describe the image. And in those cases, keep it brief.

Tables for Screen Readers

Question: What about using screen reader only tables? Is this recommended?

Answers:

  • Eric Eggert: No. People with other disabilities might also prefer using a table. Having multiple ways to access data is always a good choice.

  • Alicia Evans: Tables that are not available visually can also be confusing and difficult to follow for sighted screen reader users.

Alt Text with SEO Plugins

Question: How do you reconcile optimizing a page in WordPress with Yoast SEO which wants the key search string included in the alt text? I have been adding the descriptive text then separated with a comma or dash, adding in the key searchstring.

Answers:

Linked Icons and Text

Question: Is it not best practice to also link an icon next to linked text? And if you do link the icon, how would you use alt text?

Answers:

  • Eric Eggert: Put the icon inside the link. At this point it becomes redundant and can have an empty alt attribute.

  • Emily Lewis: The Decorative <img> and <svg> CodePen from the webinar illustrates what Eric describes.

  • Alicia Evans: There are some cases in which alternative text could be included. For example, if a link contains a phone icon followed by a phone number, then alternative text would be appropriate to indicate that this is a phone number.

Alt Text with Captions

Question: If there is a descriptive caption, should there also be alt text?

Answers:

  • Eric Eggert: Depends on the image. Usually the caption does not describe what can be seen in the image, but is additional context to the image. In that case the caption is not an equivalent to the image or its description.

  • Anthony Vasquez: A caption generally gives only basic detail. The alt text would add details such as setting, facial expressions etc.

  • Emily Lewis: When using <figcaption>, you absolutely need alt text. This article about <figcaption> puts it well: “If an image is given an empty alt, then the figcaption is in effect describing nothing.” I think this notion extends beyond the semantics of figcaption to any extended description – if the image has empty alt, what is the extended description referencing?

Text Alternatives for Handwritten Archival Documents

Question: I attended your training on Alternative Text and need to make census data accessible. It was suggested that we use OCR software but all of the tools we reviewed were unable to provide acceptable results due to the text orientation, condition of documents, and handwriting variability. Another suggestion provided in class was to crowd-source the effort but with over 47 million pages this is impossible. Can you recommend any viable solutions? View an example of the records.

Answer:

  • Anthony: This is a tricky one. There's no quick fix here. I think the work would need to be spread out across teams for them to edit what the OCR software produces. This article on digitizing archives outlines the experience of De Gruyter, a book publisher.

Resources to Learn More

Question: Books to read about this? Drinking from the fire hose here!

Answers: