A11y issue with icon: missing text label

Created on 29 May 2024, 6 months ago

Updated 2 June 2024, 6 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

strnbrg

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.

Comments & Activities

Issue created by @strnbrg
Assigned to Dobefu
Comment 6 months ago →
🇳🇱Netherlands Dobefu
Interesting, it appears that my tools did not pick it up. I'll go for the simpler solution for now, since #3450660 ✨ Option to add attibutes in twig function Active will allow for better configuration when it's done.
Issue was unassigned.
Status changed to Fixed 6 months ago6:41pm 29 May 2024
Comment 6 months ago →
🇳🇱Netherlands Dobefu
This has been fixed in https://git.drupalcode.org/project/iconify_field/-/merge_requests/10, and will be in the next release. Thank you for shopping with us
Status changed to Fixed 6 months ago3:30pm 2 June 2024
Comment 6 months ago →
🇳🇱Netherlands Dobefu

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024