The alt attribute is mandatory. It serves several important accessibility purposes. That’s why it is the first guideline of the Web Content Accessibility Guide (WCAG).
We all have seen the most well-known example of the purpose of alternative text: a broken image. In order to make the original intention of the image accessible even if it can’t load the image the browser displays the text as an alternative.
Some browsers will display an icon of a broken image alongside the alt text, other browsers will display only the alt text.
This helps sighted people to understand the context of the image if the image itself could not be loaded. Likewise, screen readers read the alt text to disabled people who can’t see the image. Since most articles on the web are packed with media files alt text is crucial.
alt values
Depending on the type and purpose of an image the value of the alt attribute should be chosen accordingly.
1. In most cases it should be a short description of the content of the image.
2. If the image serves as a link to a different page then the alt text should describe the target of the link, i.e. where the user will be taken when clicking on the image.
3. If the image is purely ornamental an empty alt attribute should be added.
<img src="floral-border.png" alt="">
If an image has a caption it may seem redundant to also add descriptive text in the alt attribute. However, search engines will benefit from a description of the image in the alternative text.
alt and screen readers
For people using a screen reader the value of the alt attribute is read to them since they can’t see the image itself. It is therefore important that the description is short yet meaningful.
If the alt alt is missing a screen reader will read the image file name instead, which in most of the cases is not very useful.
alt and svg
There is no alt property for svg images, however if inlined the svg’s title along with ARIA-roles will be used by screen readers to describe the svg graphic.
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="a11y-icon" role="img">
<title id="a11y-icon">Web accessibility icon</title>
<path ... >
</svg>