Add alt attributes to images

[estelle]

What information was incorrect, unhelpful, or incomplete?

There used to be 404 missing alt attributes. We are down to 123. We need people to help complete the remaining 123 image descriptions.

The list of missing alt attributes

There are three sheets in that file:

• General missing alt attributes images
• Missing alt descriptions in images from WebExtensions
• Images that may or may not need an alt attribute from HTML code examples (some may be example of bad markup or similar)

What did you expect to see?

Every image in MDNs content should have a useful alt attribute (the one exception: code blocks that explain bad HTML practices)

Information on writing effective alt image descriptions

Alt attributes aim to be short and concise, providing all the relevant information as the attribute value that the image conveys to a person who is able to see the image.

When writing an alt attribute, think about the useful information the image conveys to you and how you would relay that information to someone who can read all of the page's content but just can't load images. What information does the image convey that is important and relevant to the user?

The content of the alt attribute for an image differs based on the context. For example, if the photo of Fluffy the dog is an avatar next to a review for Yuckymeat dog food, alt="Fluffy" is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, the information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth." is appropriate. As the surrounding text likely has Fluffy's size and breed, you would not be included in the alt: that information is provided in the content and would therefore be redundant. As the dog's biography likely doesn't include hair length, colors, or toy preferences, which is important for adoption reasons but not in a dog food review. Don't describe the image: the prospective parent does not need to know if the dog is in- or out-doors, or that it has a red collar and a blue leash

All information image conveys that a sighted user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.

With screenshots, write what is learned from the image, don't detail the contents of the screenshot. You can omit information they don't need or already know. For example, if you're on a page about changing settings on Bing, if you have a screenshot of a Bing search result, don't include the search term or number of results, etc. as those are not the point of the image. Limit the alt to the topic at hand: how to change settings in Bing. The alt might be "The settings icon is in the navigation bar below the search field." Don't include "screenshot" or "Bing" as the user doesn't need to know it's a screenshot and already knows it's Bing as they are on a page explaining changing Bing settings.

Writing alt text

![<description>](imageSrc)
<img alt="description" src="imageSrc">

[kylewcode]

@estelle
svg_pattern_comparison_of_units.png for https://developer.mozilla.org/web/svg/tutorial/paths was marked as "not done" in the sheet, however when I went to go edit it in my updated mdn/content fork, the alt tag text was present. However the MDN website itself is showing the alt tag is empty. I don't understand why this is the case.

The text I found in my code editor after fetching the latest mdn/content is this, "Three examples showing patternUnits values of default and userSpaceOnUse and patternContentUnits values of default and objectBoundingBox. When both are set to default, the aspect ratio is maintained with white space visible. Setting patternContentUnits to objectBoundingBox effects the aspect ratio to remove white space. Setting patternUnits to userSpaceOnUse maintains the aspect ratio while eliminating white space."

[estelle]

@kylewcode You likely viewed the page after the PR for that alt text was merged but before edits were pushed to production.

I just went thru the code base. There is only one case of ![] which is on the page explaining how to write alt text in markdown, which means WE DID IT!!!!

Thank you everyone for all the amazing work. When we started with had 404 ![] missing alt attributes in markdown, and about 100 more in HTML. Because of all of your work, we can now add an alt attribute checker to the linter so we don't get any new missing text descriptions. Thank you. Thank you. Thank you!