# Image

There are two types of image:

1. content images
2. decoration images

### Working Examples

The content for this page is not yet available.

### Best Practices

Every image can be classed as important *content* or non-important *decoration*.

Every image **must** have an alt attribute. There are no exceptions.

Decoration images **must** have an empty alt attribute value. This informs screen reader to skip over this element, otherwise the long, ugly URL/filename of image will be read.

Content images **must** have a meaningful, descriptive alt attribute value that should be defined by your content team.

If a content image is adjacent to descriptive text, for example in the case of an item title right before or after the item image, then the alt text of the image can be left blank.

If possible, always try and use CSS background images or generated content (e.g. font icons) for decoration images.

Avoid using CSS background images for content images because they are disabled by default in Windows high contrast mode (this setting can be overridden in your application CSS however).

### Interaction Design

This section provides interaction design for keyboard, screen reader and pointing devices.

#### Keyboard

Image tags are not interactive by default and therefore should not be keyboard focusable.

#### Screen Reader

A screen reader will skip over a decoration image (with empty alt text) and will read the alt text of content images.

#### Pointer

Image tags are not interactive by default and therefore are not clickable.

### Developer Guide

The content for this section is not yet available.

### ARIA Reference

The content for this section is not yet available.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ebay.gitbook.io/mindpatterns/structure/image.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.