decorateIcons() function accessibility improvement when hyperlinked
- Dominant language
- HTML
- Stars
- 5
- Forks
- 11
- Avg merge
- 9h 50m
- Merged PRs (30d)
- 4
Description
When authors use SVG icons and then create links out of them, the resulting code is an A tag without any textual content, or an aria-label attribute. A common use case for this is the brand icon in the header. The Lighthouse output results in a "Links do not have a discernible name" accessibility error which reduces the score - https://dequeuniversity.com/rules/axe/4.7/link-name. To resolve this we can simply add an aria-label attribute with the icon name to the parent A element.
OOTB code should not result in Lighthouse accessibility deductions.
OOTB code does not add an aria-label attribute when :svg-icons: are authored in documents and then hyperlinked.
To reproduce this scenario, open a document, add a SVG icon via :icon-name: and then link the icon. Preview the page then run a lighthouse accessibility report. You should see the deduction.
Contributor guide
Assessment
This issue has not been assessed yet.