diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md index 85991b6daed535f..cde1d0f7ac228ee 100644 --- 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 -A Rockhopper Penguin is standing on a beach. +A Penguin on a beach. ``` +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/)