Missing alternative text

[estelle]

There are currently 404 missing alt attributes in MDN content. Yes, that # is ironic, but in mdn/content alone we currently have:

• 404 occurrences of ![](imageUrl) (to find: ![](, not as a regular expressions)
• 39 URLs of the image, like ![console-dir.png](console-dir.png) (regEx to find: !\[[\w\-]*\.\w+\])
• Untold alt attributes that provide no useful information but are not easily searchable via RegEx, like ![Figure 2](imageURL)

Every image should have an alt attribute (except for tutorials showing a bad example, of course).
Every alt attribute should be meaningful.

We need to fix the 433 easily findable ones. We can automate linting to ensure empty alt attributes don't throw an error. We also need to be aware in reviewing PRs to check for good alt attributes. Harder, though, is to reach out to contributors, current and new ones, on how to always include meaning and helpful alternative content for every single image.

[fanyak]

A note: at least some image elements seem to have an empty alt attribute.
For example, the image here has an empty alt attribute
This is isn't marked as an accessibility error by checking tools. Neither the Wave evaluation tool nor Chrome's Lighthouse tool mark this as an accessibility error

[estelle]

@fanyak

including an image in markdown automatically adds an alt attribute, so the lighthouse will never throw an error. But an empty alt attribute on an image that conveys information means that the image is not accessible. That's why you need to test accessibility with real users, not automated processes.

We can assume that all images on MDN are conveying information; no images are purely decorative. Therefore, no image should have an empty alt attribute/

[fanyak]

👍

[estelle]

When writing an alt attribute, think about how you would describe the image to someone who could read the content of the page but couldn't load any images. What information does the image convey that is important and relevant to the user?

For example, if there are green boxes with a check mark for good and red box with an X for bad, the user doesn't need to know the color of the box or the check or X. They do need to know what it is and if it's good or bad.

If there is a screenshot, explain the reason that image was used, not the contents of the screenshot. Don't provide information they don't need or already know. For example, if you're on a page about changing settings on Duck Duck go, if you have a screen shot of duck-duck-go search result, you don't need to explain what the search term is, how many results there are, how long the search took, etc. as that is not the point of the image. Since you're showing how to change settings in duck-duck-go, the alt might be "The settings icon is in the navigation bar below the search field." We didn't include "screen shot" or "duck duck go" as the user doesn't need to know it's a screen shot and already knows it's duck duck go as they are on a page explaining changing duck-duck-go settings.

[estelle]

Worksheet for missing alt attributes: https://docs.google.com/spreadsheets/d/1cDHee6mwDMlY6zANEmg8MjR8tL-wrCS86uawpWZ4XbA/edit?usp=sharing

[muchafm]

ah thank you for this!

[bsmth]

Hi all, thanks a lot for coordinating these, they're a really great addition and much needed improvements.

I would just like to mention that a great length for alt text to aim for is somewhere around 100 characters with a max around 125 chars. This is better for accessibility (some screen readers have a 125 char cutoff) and helps keep the summary easy to understand!

Thank you! 🙌🏻

[fanyak]

thank you for the feedback!