Guide · Agent skill
How to use the Empty Link Accessibility Fixer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The empty-links skill is an agent skill for Claude that teaches the agent one accessibility rule: every link needs readable text so screen reader users know where it goes. This guide explains what the skill does, how to install it from the ZIP file on our page, how to ask for a review in plain language, and what to expect from it. No prior experience with agent skills is needed.
Empty Link Accessibility Fixerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the empty-links skill ZIP from our page.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project.
- 3Or upload in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there instead.
- 4Paste the markup. Share the HTML or component code you want reviewed.
- 5Ask for a review. Make a plain request to check links for empty text, missing labels or broken destinations.
- 6Apply and verify. Make the suggested changes, then check them with browser accessibility tools or assistive technology.
What the empty-links skill makes the agent do
When you ask the agent to review rendered HTML, interactive components, or design-system patterns, the skill directs it to look for links that a screen reader would announce as just 'link' with no context. The source describes screen readers announcing empty links this way, leaving users unable to tell where a link leads or what it does.
The agent scans for empty anchor tags, icon-only links without labels, and links whose destinations appear broken. It checks that each link has an accessible name from text content, aria-label, or aria-labelledby, then suggests fixes such as adding descriptive text, an aria-label describing the destination, or visually-hidden text when visible labels are not wanted.
- Checks native semantics first, then keyboard behavior, focus flow, accessible names and screen-reader output where relevant
- Flags the exact element, label or focus issue that breaks the rule
- Explains how to verify a fix with browser accessibility tooling or assistive technology
Install the skill from the ZIP file
Download the ZIP for this skill from our page. Unzip it into one of two locations. For a personal skill available across your projects, unzip into ~/.claude/skills/. For a skill that only applies to one project, unzip into the .claude/skills/ folder inside that project.
If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills rather than placing files on disk.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project folder
- Claude apps: Settings → Capabilities → Skills
Trigger the skill with natural requests
The skill's description tells the agent when to use it: reviewing rendered HTML, interactive components, or design-system patterns for empty and broken links. You do not need a special command. Describe the review you want and include the markup or component code.
Be specific about the scope. Pasting one component or page section gives more useful results than asking for a whole site, because the skill only reasons over code the agent is shown.
- "Review this navigation component for empty or icon-only links."
- "Check this HTML for links without accessible names and suggest fixes."
- "Look at this card component: do any of its links lack a label a screen reader can announce?"
Examples of what the review finds
The skill's reference material shows typical failures. An anchor with no content, such as an empty link to /home, is announced only as 'link'. An image link with no alt text is announced as 'link, image'. An icon link containing only an SVG and no label is announced as 'link'.
The suggested fixes are to add visible text such as 'Go to homepage', or to add an aria-label describing the destination for icon-only links. The skill also flags broken link destinations to fix or remove.
<a href="/home"></a>What you need and what the skill does not do
The skill lists no required tools or packages. It runs no scripts and uses no network access, according to its listing. It is a checklist-style review guide: it does not change your files on its own and does not run a scanner.
It is not a full automated site audit, and it is not a WCAG compliance sign-off, since it covers one narrow rule about link names and destinations. Use it alongside browser accessibility tools and manual testing with assistive technology.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Covers one rule: link names and destinations
Tips for better results
Give the agent the rendered markup or component source, not just a description. Ask it to name the exact element and the fix. After applying a change, verify it with a browser accessibility inspector or a screen reader, since the skill reasons over code and cannot test how a page is actually announced.
- Include surrounding context so the agent can judge the link's purpose
- Ask for the accessible name each link would get after the fix
- Re-run the review on the changed markup to confirm
What people use it for
- Reviewing a site header or navigation bar for icon-only links that lack labels
- Checking a product card where the whole image is wrapped in a link with no alt text
- Auditing a design-system button or link component before release
- Giving QA staff a checklist-style list of link names to test
Frequently asked questions
How do I install the empty-links agent skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Is the empty-links skill free?
The skill is listed under the MIT licence. Check the licence file in the source repository for the terms that apply to your use.
What does the empty-links skill require?
Its listing shows no required tools or packages. It runs no scripts and uses no network access.
Does the skill scan my whole website?
No. It only reasons over the code the agent is shown and runs no scanner, so it is not a site-wide automated audit. Paste the markup or components you want checked.
What does the skill check for?
It looks for empty anchor tags, icon-only links without labels, and broken link destinations. It confirms each link has an accessible name from text content, aria-label, or aria-labelledby.
Can this skill replace a full accessibility audit?
No. It covers one narrow rule about link names and destinations, not full WCAG compliance. Combine it with browser accessibility tools and testing with assistive technology.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer, designer or QA tester who wants a focused review of link names on markup or components before release. Pick a broader audit tool or a full accessibility testing process if you need site-wide scanning or formal WCAG compliance sign-off.
Download the skill