SkillByAIOpen interactive version →

Lesson 20 / 30

Alt Text & ARIA

Make content usable for screen readers with alt text, empty alt for decorative images and aria-label.

Alt text isn't optional

A screen reader speaks the alt text aloud in place of an image. A decorative image should use alt="" so it's skipped, not left without alt at all.

aria-label

When an element has no visible text (like an icon button), aria-label gives assistive tech something to announce.

<button aria-label="Close dialog">&times;</button>

Quick check: What should a purely decorative image's alt attribute be?

  • Omitted entirely
  • A long description
  • The page title
  • An empty string alt=""
Answer

An empty string alt="" — `alt=""` tells screen readers to skip it silently, which is correct for purely decorative images.