Skip to main content

The Art of Alt Attributes

Screenshot of HTML code, with red box around empty alt attribute

Deciding what to include and what not to include in an image’s alt description is a grey area in web accessibility. Alt attributes (or alternative attributes) are textual descriptions of images added to the HTML code that a screen reader will read to a user as they navigate through a webpage. Every image should have an alt description to ensure that screen reader users are not missing out on key information in the user experience, but its value depends on the image’s purpose and context. 

Generally, the best approach is to determine whether or not the image provides any additional information which is not already provided by the surrounding text on the page. If it does provide additional meaning, that information needs to be captured in the image’s alt description. 

If an image provides no additional information, it is likely decorative and should be given an empty alt attribute. An empty alt attribute is different from no alt attribute at all. When no alt attribute is provided, screen readers will often try to read out the full filename of the image, which no user would enjoy! 

Best Practices

In most cases, using this list of best practices is a great way to ensure that you’re crafting the best alt descriptions possible: 

  1. Do not include “image” or “image of…” in the alt description. Screen readers will already inform users that what they are hearing is an image. 

    • However, it is often helpful to indicate the type of image, such as “screenshot of…” or “illustration of…”.
  2. Put the most important information at the beginning of the alt description so that power users don’t have to listen to the entire description every time that they reach a new image. 

  3. Keep alt descriptions short and concise to provide a clean and efficient user experience. Be careful not to provide too much information. 

    • There is no technical limit to the length of alt descriptions, but we find that a maximum of 120 characters is a good rule of thumb for the sake of screen reader user UX. 
  4. Minimize exaggerated promotional language and details within alt descriptions. Instead, place that context as visible text on the page for all users. In other words, try to keep descriptions focused on what is in the image itself, and use the surrounding content to contextualize it into a larger strategy. 

  5. When in doubt, give the image an alt description. The worst that can happen is a little extra clutter for screen reader users. 

Functional Images

Functional images are those used inside links or buttons in the place of text. These types of images should be given an alt attribute that describes the function of the link, not the contents of the image. 

Functional image example

For example, some websites have a linked logo in the navigation header of their website that, when clicked, leads the user back to the home page. Instead of describing the image in the logo, the alt attribute should read “Return to home page.” 

Decorative Images 

Decorative images only serve as visual decorations for elements on a page and do not add additional information to the surrounding text. Examples of these are flourishes around headings and custom borders, spacers, and horizontal lines. Images can also be considered decorative when they only illustrate adjacent text without adding information or are identified and fully described by the surrounding text. 

Decorative images and alt attributes can be subjective, and figuring out if an image is decorative is one of the most difficult things to do when working with images. Compared to other types of images, what qualified as “decorative” depends on context, meaning the information that surrounds the image. This can also be influenced by the personal perspective and experiences of the user, making this a difficult task to get right for all users. 

Composite links (made up of multiple sub-elements) like cards, tiles, and media objects may contain thumbnail images that are directly adjacent to descriptive titles and text that effectively describe or label the image. In these situations, the thumbnail images can be considered decorative, and thus be given an empty description, even if they would normally not be in other contexts. 

When trying to determine whether or not an image is decorative, and therefore what its alt description should be, be open to hearing a variety of perspectives from expert users, such as your team at A360. Remember the “best practice” from the beginning of this article: when in doubt, include a simple alt description. 

Informative Images

Informative images are those used in place of text to convey a single, very clear concept. These kinds of images are useful for saving space, conveying emotions and thoughts, and providing visual instructions (like an assembly diagram for furniture). 

These images should be given an alt description that conveys the meaning of the content that is displayed visually, which isn’t necessarily a literal description of the image. 

111-123-1234

The example above is a telephone next to a phone number. The alt attribute here should be “Phone number” so that the screen reader user receives the information labeling the following string of numbers as a phone number. 

Next Steps for Getting Started

Accessible360 is the nation’s leading live-user auditing company. Our auditing teams include both blind and sighted individuals, so we are alt attribute (and digital accessibility in general!) experts. For more information on this topic, making your digital properties accessible, the Web Content Accessibility Guidelines, or anything in between, please contact us using the form on this page. 

Similar Articles from the A360 Experts

← Return to the blog

Start My Free Quick Look Now

1422 W Lake Street
Suite 314
Minneapolis, MN 55408

ph: 612-440-3601

info@accessible360.com