Skip to main content

Ensure figcaption text matches figure aria-label

Medium
accessibilityreactJSX

What​

This practice applies when using a <figcaption> to describe a visual element inside a <figure>. It is triggered when there is an aria-label attribute on the <figure> that is intended to match the figcaption’s content, but the texts do not match exactly. Violations include mistakenly having different descriptive texts between the aria-label and the actual caption.

Why​

Consistency between the aria-label and the figcaption ensures that assistive technologies convey the correct and full description of the image content. This alignment is crucial for users who depend on accurate text descriptions for understanding visual content.

Fix​

Use identical text content in both the aria-label attribute on the <figure> element and the <figcaption> element. This guarantees that any assistive tool interpreting the aria-label will convey the same information as the visual caption.

Examples​

Example 1:​

Positive​

The aria-label perfectly matches the figcaption text, ensuring clear and consistent accessibility information.

import React from "react";

export const ConsistentCaption: React.FC = () => {
  const captionText = "Diagram: System Architecture Overview";
  return (
    <figure role="group" aria-label={captionText}>
      <img src="architecture.png" alt="System Architecture Diagram" />
      <figcaption>{captionText}</figcaption>
    </figure>
  );
};

export default ConsistentCaption;

Negative​

The aria-label and figcaption text do not match, which can lead to confusion for users relying on assistive technologies.

import React from "react";

export const InconsistentCaption: React.FC = () => {
  return (
    <figure role="group" aria-label="Overview of the system">
      <img src="architecture.png" alt="System Architecture Diagram" />
      <figcaption>Diagram: System Architecture Overview</figcaption>
    </figure>
  );
};

export default InconsistentCaption;