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.
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.