How to enforce alt text on media items
# help-with-umbraco
t
We use image media items on our sites. We have introduced an
altText
property field on our images, which is required. When a user creates a new media item and uploads an image, they cannot save the item if the altText is not supplied. This is great! However - if the user drag and drops an image, it is automatically created and saved with the altText missing and will thus bypass the requirement of the field. The web editors are then able to use these images resulting in missing alt texts and bad SEO scores following. What would be a way to enforce always using alt texts for images within Umbraco?
a
There was a discussion on this a little while ago
as alt text can change based on the content of the page where it is loaded, it is adviseable to add alt-text as a propety on the page itself (example next to where you select the image)
and not on the media item
m
Do you have the discussion as curious how the description of the image needs to alter with page context.. Would seem to suggest that a screen reader would tell the user it's a different image when it's actually identical?
h
Not from the conversation, but this would be the gist of it Image Alt Text Best Practices Ultimately, image alt text needs to be specific but also representative of the topic of the webpage it's supporting. 1. Describe the image, and be specific. Use both the image's subject and context to guide you. 2. Add context that relates to the topic of the page. If the image doesn't feature a recognizable place or person, then add context based on the content of the page. For example, the alt text for a stock image of a person typing on a computer could be "Woman optimizing WordPress website for SEO" or "Woman researching free blogging platforms," depending on the topic of the webpage.
d
We have used the name as a fallback if no alttext is added. That of course does not enforce the user to add an alt text, but it does make sure that the images have a alt text: var AltText = !string.IsNullOrWhiteSpace(product.Image.Value("altText")) ?product.Image.Value("altText") : product.Image.Name;
m
2. not sure I get that the "Woman researching free blogging platforms," as it doesn't aptly portay that image if the image is a "Woman typing on a computer", the page textual content also being read would give the context for why that image is present?
d
It's according to the WCAG guidelines that the alt text should tell the user how the image is relevant to the content. Users who only scan the content of the page tend to skip the text and only check out images and links
If an image is merely decorative, you can also mark an image as such and then you don't need a description
a
Yes indeed
and especially, do not add an alt tag on EVERY image
only ones that are relevant
m
https://www.w3.org/WAI/GL/WCAG3/2020/how-tos/text-alternatives/ interestingly their example about nuances related to the content still describes the image composition though? and not describing the image to explain the content?
also suggests empty alttext is now fine.. though been so long since I had to deal with this thought it was
alt="**"
10 Views