Create a list of recommended rules

Pattern: rule : guidance

• Does not start with "photo of" : Photo of is a repetitive phrase that is not helpful to people trying to understand the image.
• does not equal filename : A filename is annoying to listen to and communicates nothing about the content of the image. Please use a meaningful description of the image.

Some public guides for reference:

• https://www.w3.org/WAI/tutorials/images/decision-tree/
• https://www.w3.org/WAI/tutorials/images/
• https://accessibility.huit.harvard.edu/describe-content-images
• https://developers.google.com/tech-writing/accessibility/self-study/writ...
• https://www.levelaccess.com/blog/alt-text-for-accessibility/
• https://infogram.com/blog/how-to-write-alt-text-descriptions/

Editoria11y also flags alts that are suspiciously short, suspiciously long, contain common placeholder text for validation evasion or trim() to 0 length if you remove unpronounceable characters like "?,.'. The first two are "soft" alerts, the latter three cannot be dismissed.

If you are validating server-side, you could potentially OCR the image as well and flag images of text. That's too computationally heavy for me to do at runtime.

another rule could be that alt texts should not contain copy right information. i saw it repeatedly that editors used the alt text simply for the copy right information crediting who took the photo not what the photo was actually about.

Oh that's a great idea. I should add that too.

@itmaybejj, @mgifford, and @rkoller thank you for all the ideas. They are very helpful.

there is another potential rule i just ran into today, but i am not sure if the alt_text_validation module would be able to validate against it, editoria11y might be able to. but the thing i ran it was that the site used the same string the title / header of a card component is using for the alt text. in that particular case that header wasnt even marked up with an h-tag but with a p-tag instead, which might make the validation even trickier. here is an example of the html source. the title/header of the card:

<p class="h1 featured-card__title">Books - Fanzines - Magazines</p>

the image on the card:

<img class="featured-card__image lazyloaded" src="//bisaufsmesser.com/cdn/shop/collections/books_420x.jpg?v=1612535878" alt="Books - Fanzines - Magazines" srcset="" sizes="(min-width: 960px) 450px, (min-width: 720px) 50vw, 100vw" style="max-height: 247.5px;">

if you want to take a look at the different card examples in context, the img src contains the link to the domain.

That is an interesting one @rkoller there will be an option to prevent or warn if the image title attribute repeats the alt attribute but it will not have scope to go looking at things beyond the img tag contents or where it is placed. This will all be validated with entity validation on save.

Some ideas from Mozilla with AI

https://blog.mozilla.org/en/mozilla/ai/help-us-improve-our-alt-text-gene...

https://hacks.mozilla.org/2024/05/experimenting-with-local-alt-text-gene...

I like this article about when to use alt text and when there is enough information nearby that it perhaps can create duplicate content.
https://webaim.org/techniques/alttext/

Also, there should be rules to ensure that if an image is being used to display text, the text should be conveyed in the alt text as well.

I would love to be able to have this spot text in the images and compare them to the alt, but I have no experience with tapping into an OCR service. I'll have to look into that.