#How to enforce alt text on media items

1 messages · Page 1 of 1 (latest)

soft plume
#

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?

shadow sable
#

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

thin pewter
#

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?

subtle lance
#

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.
sullen cedar
#

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<string>("altText")) ?product.Image.Value<string>("altText") : product.Image.Name;

thin pewter
shut kindle
#

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

shadow sable
#

Yes indeed

#

and especially, do not add an alt tag on EVERY image

#

only ones that are relevant

thin pewter