Links without a name on Lovable
What this is
3 links have no text. Screen reader users hear just "link" and cannot tell where it goes; keyboard users see an empty focus box.
Who it affects
- Screen reader users
- Keyboard users
- People with cognitive disabilities
Standards
How to fix it
- Give the link visible text that describes its destination.
- For icon-only links add `aria-label="…"` or visually hidden text inside the link.
- Make sure the name says where the link goes, e.g. "Shopping cart" not "icon".
Example
Before
<a href="/cart"><svg aria-hidden="true"></svg></a>After
<a href="/cart" aria-label="TODO: describe where this link goes"><svg aria-hidden="true"></svg></a>Replace the TODO with the link destination, e.g. "Facebook page".
On Lovable
Ask the builder to give each icon-only link/button a descriptive `aria-label` and to replace vague text like "click here" with the destination.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.