Example
Alt-text is used by screen readers for visually impaired users and by search engines. It's therefore important to write good alt-text for your images.
The text should look correct even if you replace the image with its alt attribute. For example:
<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>
Without the images, this would look like:
Anonymous user avatar An anonymous user wrote:
Lorem ipsum dolor sed.Edit icon / Delete icon
To correct this:
- Remove the alt-text for the avatar. This image adds information for sighted users (an easily identifiable icon to show that the user is anonymous) but this information is already available in the text.1
- Remove the "icon" from the alt-text for the icons. Knowing that this would be an icon if it were there does not help to convey its actual purpose.
<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>
An anonymous user wrote:
Lorem ipsum dolor sed.Edit / Delete
Footnotes
1 There is a semantic difference between including an empty alt attribute and excluding it altogether. An empty alt attribute indicates that the image is not a key part of the content (as is true in this case - it's just an additive image that is not necessary to understand the rest) and thus may be omitted from rendering. However, the lack of an alt attribute indicates that the image is a key part of the content and that there simply is no textual equivalent available for rendering.
