The aria-label="*" and aria-hidden="true" attributes in the same svg element

ndiego / icon-block

Effortlessly add SVG icons and graphics to your website.

https://nickdiego.com/projects/icon-block/

GNU General Public License v2.0

104 stars 14 forks source link

The aria-label="*" and aria-hidden="true" attributes in the same svg element #33

Open gyurmey2 opened 1 year ago

gyurmey2 commented 1 year ago

Important. Applies to WP icons only (not custom icons).

aria-hidden="true" will hide the element completely to assistive technology. The element will not be in the accessibility tree (kind of like the DOM tree) so a screen reader user will not know the element is there. The aria-label="*" will be ignored because it's hidden.

Additionally, when we add a link without adding a label attribute, the aria attribute returns an empty string (for WP & custom icons).

ndiego commented 1 year ago

Thanks for reporting this issue @gyurmey2. I have looked into it and the aria-hidden="true" appears to be hardcoded in all Core icons and I have not been able to figure out a way to override this. I'll keep exploring a solution, but just wanted to provide an update.