Add a11y alt attribute explainer to html img element (#36067)

* Add a11y alt attribute explainer to html img element This adds some explanation on how to choose a good alt attribute for an image and what is meant by the *Don't* and *Do* examples already present. Also see #36050 for context. * Update files/en-us/web/html/element/img/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/html/element/img/index.md Co-authored-by: Chris Mills <[email protected]> * Update index.md * Update files/en-us/web/html/element/img/index.md Co-authored-by: Chris Mills <[email protected]> * Update files/en-us/web/html/element/img/index.md Co-authored-by: Chris Mills <[email protected]> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Chris Mills <[email protected]>
mdn · Oct 16, 2024 · e3977ac · e3977ac
1 parent f216422
commit e3977ac
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md
@@ -298,9 +298,13 @@ An `alt` attribute's value should provide a clear and concise text replacement f
 #### Do
 
 ```html example-good
-<img alt="A Rockhopper Penguin is standing on a beach." src="penguin.jpg" />
+<img alt="A Penguin on a beach." src="penguin.jpg" />
 ```
 
+A simple accessibility test is to read the `alt` attribute content together with preceding textual content to see if it conveys the same meaning as the image. For example, if the image was preceded by the sentence "On my travels, I saw a cute little animal:", the _Don't_ example could be read by a screen reader as "On my travels, I saw a cute little animal: image", which doesn't make sense. The _Do_ example could be read by a screen reader as "On my travels, I saw a cute little animal: A Penguin on a beach.", which does make sense.
+
+For images used to trigger an action, for example, images nested inside an {{htmlelement("a")}} or {{htmlelement("button")}} element, consider describing the triggered action inside the `alt` attribute value. For example, you could write `alt="next page"` instead of `alt="arrow right"`. You could also consider adding an optional further description inside a `title` attribute; this may be read by screen readers if requested by the user.
+
 When an `alt` attribute is not present on an image, some screen readers may announce the image's file name instead. This can be a confusing experience if the file name isn't representative of the image's contents.
 
 - [An alt Decision Tree • Images • WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/images/decision-tree/)