Accessibility issue - [role="img"] elements must have an alternative text

Created on 6 January 2025, 4 months ago

Problem/Motivation

While using Font Awesome Icon as external link indicator we get icon in a span element which have role="img" tag and doesn't have area-label or alt attribute, and because of that when we run accessibility tests it gives error => [role="img"] elements must have an alternative text

Span element code -

<a href="https://www.example.com/" title="Link title (opens in a new window)"
  class="ext" data-extlink="" target="_blank" rel="noopener noreferrer"
  tabindex="-1">Link Text <span
    class="extlink-nobreak" aria-label="(link is external)"
    role="link">extlink<span class="fa-ext extlink" role="img"
      aria-hidden="false"><span class="fa fa-external-link"
        data-extlink-placement="append"></span></span></span></a>

Steps to reproduce

- In extlink configuration check checkbox "Use Font Awesome icons instead of images" and use fa fa-external-link class for external link indicator
- check on pages with external link

🐛 Bug report
Status

Active

Version

2.0

Component

Code

Created by

🇮🇳India rakesh.regar Rajasthan, India

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024