Image alt text: how to write it, and how to check it

1Check every image on the page 30 seconds

Open DevTools (F12), go to the Console and paste:

Copy// Lists images with no alt, an empty alt, or alt text that looks like a file name,
// and outlines them (red: fix it, orange: fine if decorative). Reload the page to clear the outlines.
const fileLike = a => /^\S+\.(jpe?g|png|gif|webp|avif|svg|heic|bmp|tiff?)(\?\S*)?$/i.test(a)
  || /^(img|image|photo|picture|pic|dsc|pxl|untitled)([-_ ]?\d+)*$/i.test(a)
  || /^screen ?shot[-_ ]?\d/i.test(a);
const named = el => [el.innerText, el.getAttribute('aria-label'), el.getAttribute('title'),
  ...(el.getAttribute('aria-labelledby') || '').split(/\s+/).map(id => id && document.getElementById(id)?.textContent),
  ...[...el.querySelectorAll('img')].map(i => i.getAttribute('alt') || i.getAttribute('aria-label'))]
  .some(v => v && v.trim());
const rows = [...document.images].map(img => {
  const alt = img.getAttribute('alt');
  const link = img.closest('a[href], button');
  const src = img.currentSrc || img.src || img.getAttribute('data-src') || '';
  const result = alt === null ? 'NO alt attribute'
    : !alt.trim() ? (link && !named(link) ? 'EMPTY alt, and nothing else names the link' : 'empty: fine if decorative')
    : fileLike(alt.trim()) ? 'looks like a file name or placeholder'
    : 'ok';
  if (result !== 'ok') img.style.outline = '3px solid ' + (result.startsWith('empty:') ? 'orange' : 'red');
  return {
    image: src.startsWith('data:') ? '(data: URI)' : src ? src.replace(/^https?:\/\/[^/]+/, '').slice(-60) : '(no src yet)',
    alt: alt === null ? '(none)' : alt.slice(0, 60),
    result,
  };
});
console.table(rows.filter(r => r.result !== 'ok'));
console.log(rows.length + ' images checked (images inside shadow DOM and SVG <image> are not included)');

It lists images with no alt attribute, an empty one, or alt text that looks like a file name, and outlines them on the page: red for ones to fix, orange for empty alt text, which is fine if the image is decorative.

A script can't tell whether an image is decorative or whether its alt text is accurate. Use the list to find images to look at, then judge each one yourself. Reload the page to remove the outlines. Images inside shadow DOM and SVG <image> elements aren't checked.

2Inspect an image 30 seconds

Right-click an image and choose Inspect. The <img> tag is highlighted in DevTools, with its alt attribute if it has one. Open the Accessibility tab next to Styles (it may be behind the » button). Under Computed Properties, Name is the label Chrome gives screen readers. If an image that matters has an empty Name, it needs alt text.

3Listen to it 5 minutes

Turn on your computer's screen reader (Narrator: Ctrl+Windows+Enter; VoiceOver: ⌘+F5) and move through the page. You'll hear which images are described, which are skipped, and which are read as a file name or "unlabelled image".