skills.rest
po4yka
po4ykaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

link-purpose

Analyzes code for WCAG 2.4.4 link purpose violations and recommends accessible link text fixes.

Updated Mar 28, 2026
Search Tags:#code analysis#accessibility#a11y#screen reader#wcag#aria-label#link purpose
One-click install
npx skills add https://github.com/po4yka/blog --skill link-purpose-po4yka
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: link-purpose
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/accesslint-link-purpose
Command: npx skills add https://github.com/po4yka/blog --skill link-purpose-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Screen reader users often navigate pages by jumping between links or reviewing a list of all links, so generic text like "click here" or "read more" gives them no idea where a link leads. This Skill audits your components for WCAG 2.4.4 Link Purpose (In Context) violations and provides concrete code fixes. ## Core Features & Use Cases - Generic Link Text Detection: Finds vague phrases like "read more", "learn more", and "click here" that lack context, including duplicates generated inside loops. - Ambiguous and Image-Only Link Detection: Flags repeated identical link text pointing to different destinations, icon links without accessible names, and download links missing file type or size information. - Actionable Fix Recommendations: Suggests multiple compliant patterns per violation, such as sr-only text, aria-label, aria-labelledby, or linking the heading, with code examples. - Use Case: While reviewing a product grid component that renders "Learn more" links in a map loop, run this Skill to get a report of each violation with file and line numbers plus ready-to-apply fixes. ## Quick Start Analyze src/components/ArticleCard.tsx and src/components/ProductGrid.tsx for WCAG 2.4.4 link purpose violations and suggest fixes.

Frequently Asked Questions about link-purpose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix "read more" links for WCAG 2.4.4 compliance?▼

Add context so each link's purpose is clear, either by appending visually hidden sr-only text with the item title, adding an aria-label, or making the link text descriptive on its own. Linking the card heading instead is the recommended best practice.

How to find ambiguous links in React components?▼

Search for identical link text rendered multiple times, especially inside map loops where each iteration links to a different destination. Include the item name in the link text or in sr-only text so screen reader users can distinguish them.

Does WCAG 2.4.4 apply to icon-only links?▼

Yes, icon-only and image-only links must have an accessible name. Add an aria-label to the link, include visually hidden text, or give the image descriptive alt text, and mark the icon itself aria-hidden.

Can surrounding paragraph text make a generic link compliant?▼

Programmatically determined context such as text in the same sentence, paragraph, list item, or preceding heading can satisfy Level A. However, descriptive link text alone is more robust because screen reader users often navigate links out of context.

What information should download links include for accessibility?▼

Download links should indicate the file format and size, for example "Download annual report (PDF, 2.3 MB)". You can include this visibly in the link text or via sr-only text or an aria-label.

Related Skills

Explore More Software Engineering Skills→
ClyptAIClyptAI

web-design-guidelines

Audit frontend UI code against Web Interface Guidelines for accessibility and consistency.

Official
Intermediate
Community-AccessCommunity-Access
387

Testing Coach

Guide accessibility testing for web applications with screen readers and automated tools.

Official
Intermediate
Bizarre-IndustriesBizarre-Industries

accessibility

Audit web accessibility against WCAG 2.2 criteria and ARIA patterns.

Official
Intermediate
yourlabptyourlabpt

constraint-driven-development

Establishes enforceable project quality constraints in a CONSTRAINTS.md file with thresholds and checks.

Community
Advanced