Decorative images
Decorative images include any images whose only purpose is to add visual decoration to the page, rather than to convey information that is important to understanding the page. Examples of decorative images include backgrounds and line dividers.
| Markup language | Empty alt text attribute | Code example |
|---|---|---|
| HTML | <alt=""> | <img src="/path/to/img.png" alt=""> |
| Markdown | ![] |  |
Including an empty alt text attribute for decorative images ensures that screen readers don’t read the filename aloud.
tip
For help with determining what kind of of alt text an image requires, refer to the W3C Web Accessibility Initiative's Alt decision tree.
Example decorative images
The following sections provide example images along with their suggested alt text and code examples.
Example 1: Decorative image as part of a text link
The following image is used to make a link easier to identify and to increase its clickable area. However, the image doesn’t add to the information already provided in the adjacent link text (of the same anchor).
Source: Unity User Manual 2021.3 (LTS) (Unity Manual).
Suggested alt text: None.
Example 2: Decorative image with adjacent text alternative
The following image is fully described by the adjacent text. As a result, there is no need to repeat this information in the alt text.
Source: Select your guided project (Unity Learn).
Suggested alt text: None.
Example 3: Decorative image for visual interest
The following image is a decorative image on a landing page that doesn't explain or clarify any content in the main body text. This image is used only to add ambiance or visual interest to the page.
note
If the purpose of your image is to demonstrate a specific concept that's discussed in the main text, then refer to Essential images. For example, images that show a specific lighting effect or graphics setting are likely to be informational images.
Source: High Definition Render Pipeline overview (Unity Manual).
Suggested alt text: None.
Example 4: Image used as part of a webpage design
The following image is used as a border in a webpage design. Its purpose is purely decorative.
Source: Decorative images (W3C WAI).
Suggested alt text: None.