Disabilities Affected: Cognitive, Visual
This guideline requires that all meaningful non-text content (like images, icons, charts) has a text alternative (often called “alt text”). This text should convey the same purpose or information as the non-text content. Decorative images, however, should have empty alt attributes (alt=””) so screen readers can ignore them.
Why It Matters
People who are blind use screen readers, which read web content aloud. Screen readers cannot interpret images directly; they rely on alt text to understand the image’s content or function. Without alt text, vital information or functionality conveyed by images is lost. Users with low vision might use text-to-speech software, and users with cognitive disabilities might benefit from clear descriptions.
Fixing the Issue
Provide descriptive alt text for all informative images using the alt attribute. For complex images like charts or graphs, provide a longer description nearby or link to one. For images that are purely decorative and convey no information, use an empty alt attribute (alt=””). For functional images (like an image used as a button), the alt text should describe the action or destination (e.g., alt=”Search”).
Good Code Example
Here’s an example of images with appropriate alt text:
-
<img src="/wp-content/uploads/logo_accessitree_dark.svg" style="width:300px;" alt="Awesome Company Inc. Homepage">
-
Bad Code Example
This example shows missing or unhelpful alt text:
-
<img src="/wp-content/uploads/important_chart.png">
<img src="/wp-content/uploads/icon_avatar.svg" style="width:60px;" alt="image">
<img src="/wp-content/uploads/icon_decorative_border.svg" style="width:100px;" alt="Decorative Border Image">
-
