The redundancy is necessary to adequately describe the function of the linked image, especially if it were to be accessed in isolation from the adjacent text, such as if a screen reader user were navigating by links. A screen reader would typically read 'Link, Image, Astronaut Ellen Ochoa. So, alt='Astronaut Ellen Ochoa' is the best choice. Since no adjacent text within the link describes the link's function, it must be conveyed within the image alt attribute. The image is also a link, so it has a function. 'Wikipedia entry for Ellen Ochoa, Astronaut'.Note that this image is linked (and is the only content within that link). 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. '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.Īn empty alt attribute is not appropriate either. 'Image of Ellen Ochoa, Astronaut' redundantly describes the image as an image. Her mode of dress further conveys that she is an astronaut-which is meaningful, given her achievements.īased on this, we recommend alt='Astronaut Ellen Ochoa'. In the example above, the image content informs the user that this is Ellen Ochoa. If the image's content is presented within the surrounding text, then alt='' may be all that's needed. In this case, the image does not have a function.Īssessing and summarizing an image's content can be more difficult. An image only has a function if it is linked (or has an within a ), or if it's in a. 'Ellen Ochoa, the first Hispanic woman to go into space'įirst, consider its content and function.What would you choose as alt text for the image in Example 1? Thus, alternative text is about more than just the alt attribute.Įvery image should have an alt attribute, even if it's alt='' (sometimes called 'null' alternative text). within visible body text near the image, or when the text equivalent cannot be presented succinctly, alternative text can be presented on a separate page, linked from either the image or a text link adjacent to the image.within the alt attribute of the element.Web page authors must provide alternative text that represents the content and function of their images.Īlternative text can be presented in two ways:

A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. Search engines use alternative text and factor it into their assessment of the page purpose and content.Īlthough 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.If an image fails to load or the user has blocked images, the browser will present the alternative text visually in place of the image.Screen readers announce alternative text in place of images, helping users with visual or certain cognitive disabilities perceive the content and function of the images.This article is focused on images, but its principles also apply to multimedia and other non-text content.Īlternative text serves several functions: Alternative text is a textual substitute for non-text content in web pages.

How to write text on a picture in html