Images must have alternative text

Critical1.1.1AXE · image-altDocs

Pages 1on W3C BAD Demo

Elements 33

Open 5d 4hsince 4/24/2026

First seen 4/24/2026

Last seen 4/26/2026

Every <img> element must have an alt attribute that describes the image content. Decorative images should use alt="".

Scanner evidence

Engine: axeRule: image-altWCAG: 1.1.1

Ensure <img> elements have alternative text or a role of none or presentation

How to fix

Fix any of the following: Element does not have an alt attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"

Affected pages (1)

https://www.w3.org/WAI/demos/bad/before/home.html

Affected elements (33)

https://www.w3.org/WAI/demos/bad/before/home.html33

```
<img src="./img/border_left_top.gif" width="10px" height="10px">
```
img[src$="border_left_top.gif"]
on https://www.w3.org/WAI/demos/bad/before/home.html
```
<img src="./img/border_top.gif" height="10px">
```
img[src$="border_top.gif"]
on https://www.w3.org/WAI/demos/bad/before/home.html
```
<img src="./img/border_right_top.gif" width="10px" height="10px">
```
img[src$="border_right_top.gif"]
on https://www.w3.org/WAI/demos/bad/before/home.html

Why this matters

Every <img> must have an alt attribute. Decorative images use alt="".

WCAG Technique H37

AI guidance

Remediation suggestions generated by AI. Review before applying.

**Why this matters:** Screen reader users cannot perceive decorative images without alt text, and search engines cannot index image content, reducing discoverability and creating barriers for visually impaired users.

**Before:**
```html
<img src="./img/border_left_top.gif" width="10px" height="10px">
<img src="./img/border_top.gif" height="10px">
<img src="./img/border_right_top.gif" width="10px" height="10px">
```

**After:**
```html
<img src="./img/border_left_top.gif" width="10px" height="10px" alt="">
<img src="./img/border_top.gif" height="10px" alt="">
<img src="./img/border_right_top.gif" width="10px" height="10px" alt="">
```

**Notes:** These appear to be purely decorative border images. Use `alt=""` (empty alt attribute) to hide them from assistive technology, which is the correct semantic approach. If these images convey content or meaning, provide descriptive alt text instead (e.g., `alt="border decoration"`). WCAG 1.1.1 Level A requires all images have alternative text; empty alt text is valid for decorative images.

Activity (0)

No activity yet.