Skip to main content

Associate aria labels for links when visual text is insufficient

Medium
accessibilityreacttypescript

What​

This practice is triggered when links use non-text elements (like icons or images) or very short text, which might not fully convey the link's purpose.

Why​

Using aria-label attributes ensures that even when the visual content is minimal, assistive technologies can access a meaningful and descriptive label for the link.

Fix​

Add an aria-label attribute to the link element to explicitly define its purpose, ensuring compliance with WCAG guidelines and ARIA standards.

Examples​

Example 1:​

Positive​

The positive example enhances the link's accessibility by providing an aria-label that clearly describes its purpose.

import React from 'react';

const IconLink = () => {
  return (
    <div>
      <span>Follow us on Twitter:</span>
      <a
        href="https://twitter.com/example"
        aria-label="Follow us on Twitter"
      >
        <svg width="24" height="24" role="img" aria-hidden="true">
          <use xlinkHref="#twitter-icon" />
        </svg>
      </a>
    </div>
  );
};

export default IconLink;

Negative​

The negative example lacks an aria-label on the link, which can leave users of assistive technologies unaware of the link's purpose.

import React from 'react';

const IconLink = () => {
  return (
    <div>
      <span>Follow us on Twitter:</span>
      <a href="https://twitter.com/example">
        <svg width="24" height="24" role="img" aria-hidden="true">
          <use xlinkHref="#twitter-icon" />
        </svg>
      </a>
    </div>
  );
};

export default IconLink;