adobe / adobe/aem-lib

decorateIcons() function accessibility improvement when hyperlinked

Open
#13 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.