a11y: duplicate link text in user home page account links

[eatyourgreens]

Package

• lib-user

Describe the bug

The home page links for a user account duplicate the link text for each link:

• Favorites FAVORITES.
• Collections COLLECTIONS.
• Comments COMMENTS.
• Messages MESSAGES.

To Reproduce

On the homepage, or in the storybook, right-click on each link and inspect its accessible name in browser dev tools. This is the link text that will be heard in NVDA or JAWS.

Alternatively, use the Navigate like a screen reader user bookmarklet to list and inspect links (and form controls) on the page.

Screenshots

Chrome:

Firefox:

Expected behavior

Link text in a screen reader should match the text shown to sighted users. You don't need to duplicate a visible label as alt text.

Additional context

WCAG 2.2: SC 2.4.4: Link purpose (in context) is a level A requirement.

Alternative text of images should not be repeated as text (from the axe linter rules.)

[eatyourgreens]

Bonus accessibility tip: if you write a word as ALL CAPS, rather than styling it with text-transform: uppercase, then both JAWS and NVDA may read it out as an abbreviation, letter-by-letter.

EDIT: VoiceOver may also read upper case styled text letter-by-letter. 🤦🏼‍♂️

• https://stackoverflow.com/questions/28549307/apple-voiceover-reading-words-as-acronyms-can-this-be-controlled
• https://dev.to/atyborska93/comment/12glk