![]() ![]() (If this icon were used in a different context, it may be important that the user know that it is an icon.)Įmpty alt text would omit the important information that the image presents-that the link is to a PDF document. "PDF icon" describes what the image looks like, but it is not the most appropriate for this context-"icon" is redundant here. The function ("Download the employment application") is presented within the text of the link, so it does not need to be included again within the alt attribute. "Employment application" would be redundant. This conveys the content of the icon-no more, no less. The content of the image is presented in context, so alt="" is appropriate.What alt text would you choose for the icon image in Example 4? Note that the icon is within the link. This example would be more accessible for all users if both the image and the text caption were contained within one link: If it's empty or missing, screen readers might read the image filename or the URL of the linked page in hopes that this may be helpful to the user, but this is not always the case. ![]() When an image is the only content inside a link or button, alt text is all that a screen reader has to go on. "Read More" does not provide enough information, especially out of context.Įmpty alt text would never be appropriate here. "Wikipedia entry for Ellen Ochoa, Astronaut" provides content other than that conveyed by the image-the fact the link goes to Wikipedia. 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. ![]()
0 Comments
Leave a Reply. |