A11y issue with icon: missing text label

Created on 29 May 2024, 7 months ago
Updated 2 June 2024, 7 months ago

Problem/Motivation

The icon does not have a text label which is an accesibility issue.

Solutions

An easy solution would be to add a `aria-hidden="true"` to the svg element. This would keep it out of the accesibility tree.
The icon should then only be used as a decorative icon.

More extensive solution would be to add an option to hide it from the accesibility tree or to ability to add accessible text label.
The are multiple ways of achieving this.
https://www.sarasoueidan.com/blog/accessible-icon-buttons/
https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11...
https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-compari...

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024