Use of figcaption vs alt-text?

Nancy.E.310

Which is best to use from an accessibility point of view and that works best with screen readers? I have been looking, and I need help finding consistency. Some say do not use alt="" with a figcaption, and some say it is OK. WCAG standards do not speak to this. There are times when attributions are needed for images. I have always used figcaption. This would be for decorative images. Is that acceptable?

Thank you for your help.

Aasim.Y.704

Hey @Nancy.Evans2474,

Thanks for connecting with us here at the Brightspace Community.

I am not a native screen reader user myself, but I know that when we use alt='' in the code while inserting an image, that makes screen readers ignore the image. Screen reader users with vision loss will not know that there is an image in that place. Reading a caption for an image that they don’t know as existing on the page could send mixed messages to these users.

Getting a native screen reader user’s view on this would be more valuable. WCAG might not speak about this because there could be different views on this matter among different screen reader users as this is subjective and not something that could be made prescriptive.

Pedro.S.874

Hello Nancy,

Both 'figcaption' and 'alt' attributes serve different purposes, and they are both essential for accessibility. 'alt' is used to describe the content to users who are visually impaired or who use screen readers to navigate the web. When an image fails to load, the 'alt' attribute is also displayed in its place, providing users with context about what the image should have been. It is essential to keep 'alt' text short, descriptive, and relevant to the image.

On the other hand, 'figcaption' provides a caption or description of an image, which may include more detailed information than the 'alt' text, such as the author or source of the image. It is beneficial for complex images, such as graphs or charts.

Therefore, using both 'alt' text and 'figcaption' for images is recommended. 'alt' text should be used to describe the image's content. In contrast, 'figcaption' can provide additional information or context.

When using 'figcaption', it is essential to associate it with the corresponding image using the 'figure' element. This helps assistive technologies understand the relationship between the image and the caption.

I referred to WCAG 2.1 Success Criteria 1.1.1 Non-text Content and 1.4.5 Images of Text, which guide providing text alternatives for non-text content and providing descriptive text for images.

Using empty 'alt' attributes with decorative images is generally not recommended, as this can confuse users of assistive technologies like screen readers. Instead, it is best to use a null 'alt' attribute (i.e., alt = "", like you just said) to indicate to screen readers that the image is decorative and does not convey any information.

Regarding using 'figcaption' with decorative images, it is generally acceptable to provide attributions or captions for these images.

I hope I could help!