My thoughts and favorite points of someone else’s writing from the web:
Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. Web page authors must provide alternative text that represents the content and function of their images.
- Every image should have an alt attribute, even if it’s
alt=""(sometimes called “null” alternative text). - Null alt text should be used for all decorative images.
- I’ve found that most images in web “apps” (tools, as opposed to web “sites”) tend to be decorative and call for null alt text.
The same image can require different alt text based on its context
Section titled: The same image can require different alt text based on its context
As the first Hispanic woman to go to space, and, later, the first Hispanic director of Johnson Space Center, Ellen Ochoa is widely regarded as a role model.
As displayed, the correct alt text for this image is alt="" because the content of the image is presented within the surrounding text: “Ellen Ochoa, Astronaut”
If that caption were missing, the correct alt text for this image would change to alt="Astronaut Ellen Ochoa".
Even though the body text names Ellen Ochoa, visual users can tell this directly from the content of the image—and so, since the image conveys content, it needs more than an empty alt attribute. Her mode of dress further conveys that she is an astronaut—which is meaningful, given her achievements.
Examples of incorrect alt text:
Section titled: Examples of incorrect alt text:-
alt="Image of Ellen Ochoa, Astronaut"redundantly describes the image as an image. This is one of the most common errors that I see with alt text. -
alt="Ellen Ochoa, the first Hispanic woman to go into space"includes information that is not part of the image, and is also redundant with the body text.