Decorative Images

Images that do not convey meaning or are redundant to other page information should be considered decorative and hidden from assistive technology. For <img> elements, use null ALT text: alt="". To hide decorative SVG elements, add aria-hidden="true".

<img src="image.png" alt="" />

<svg aria-hidden="true" focusable="false">
  <!-- SVG content here -->
  <path d="..." />
</svg>

Always include alt="" for <img> elements; otherwise screen readers may inappropriately announce other information, such as the image file name.

When deciding whether an image is decorative or informative, consider the following:

Design elements

Borders, lines, shadows, or other imagery that merely contribute to page layout and style should be considered decorative.

‘Stock’ Photos

Some images convey a feeling or add visual interest but provide no actual information. These may come from stock photo services or internal repositories. Stock photos used for ambiance or visual appeal can be marked as decorative / hidden.

If you could swap one photo with another without any real effect, consider it decorative. In the following example, the photo accompanying links about undergraduate studies could be replaced with virtually any image of students on campus without changing the information conveyed.
 

An image showing students sitting together on a green field. While this could be considered meaningful in conveying the atmosphere of the student experience, given the context, it is more appropriate to consider it a decorative "stock" photo. It primarily provides visual appeal accompanying the more meaningful links and headings beside it.

'Cards' with Redundant Images

In cases like the example below, where event "cards" show event details in text with adjacent thumbnail images, the images don't provide additional relevant information. These images should be given null ALT text.

Note: If the images in cards are also links, use a technique to hide the redundant image link from screen reader and keyboard-only users.