Media

Decide decorative versus informative alt text for a mixed page

A scenario prompt for a single blog post with three different image types (banner, screenshot, icon), walking through which get empty alt attributes and which need real descriptions, plus the icon that looks decorative but isn't.

Works with Claude / GPT720 uses 4.3

The prompt

media-decorative-vs-informative-alt-text
A single blog post has three images on it:

1. A generic stock photo banner at the top (people typing on laptops in a bright
   office), used purely as visual header decoration, doesn't relate to any
   specific point in the text.
2. An inline screenshot of a WordPress settings screen, showing a toggle the post
   instructs readers to switch on, with an arrow graphic pointing at it.
3. A small triangular icon used as a visual divider between two sections, purely
   stylistic, no informational role.

[replace with your own page's actual image list]

For each image, tell me:
- Whether it should get alt="" (decorative, ignored by screen readers) or a real
  descriptive alt text, and why.
- For image 2, write the actual alt text, since a reader following instructions
  needs to know which toggle and its state, not just "screenshot of settings
  page."
- One edge case to double check before finalizing: are there any other icons
  on this page that look purely decorative like image 3 but are actually the only
  visual indicator of something important (a warning icon, a "new" badge, a
  required-field asterisk)? If so, those need informative alt text despite
  looking cosmetic, and I want them flagged separately from the true decoration.

The banner and divider icon are easy calls. The trap is anything that looks decorative at a glance but is actually load-bearing, a warning triangle, a required-field marker, a “new” badge, since those get miscategorized as decorative more often than any other image type on a page.