Skip to main content

Provide descriptive alternative text for images

Medium
accessibilityreacttypescript

What​

When using <img> elements in your React TSX code to display informative images, ensure that each image includes a meaningful alt attribute. This practice triggers whenever an image is used to convey important information.

Why​

Alternative text is essential for accessibility, allowing screen readers to describe the image content to visually impaired users, and it is required by WCAG guidelines. Without it, users may miss important information conveyed by the image.

Fix​

Add a descriptive alt attribute to each <img> element in your TSX components. Ensure the text concisely describes what the image portrays rather than merely stating that it’s an image.

Examples​

Example 1:​

Positive​

The image element includes a clear and descriptive alt text, meeting accessibility standards.

import React from "react";

const AccessibleImage: React.FC = () => {
  return (
    <div>
      <img 
        src="https://example.com/informative-image.png" 
        alt="Diagram illustrating the data processing workflow" 
      />
      <p>This diagram explains the step-by-step process of data handling.</p>
    </div>
  );
}

export default AccessibleImage;

Negative​

The image element is missing the alt attribute, making it non-compliant with accessibility requirements.

import React from "react";

const InaccessibleImage: React.FC = () => {
  return (
    <div>
      <img 
        src="https://example.com/informative-image.png" 
      />
      <p>Image intended to show the data processing workflow.</p>
    </div>
  );
}

export default InaccessibleImage;