Imagine walking through a city where every street sign just says "This Way" or "Go Here" instead of actually naming the destinations. You'd be constantly confused about where each path leads, forced to follow links blindly to discover where they take you. This is exactly what vague link text like "click here" and "read more" does to website visitors.
Descriptive link text is the practice of writing link content that clearly explains what users will find when they click. Instead of generic phrases, descriptive links tell users exactly what to expect—whether it's a specific page, document, action, or external site they'll encounter.
Clear link text serves multiple important functions that benefit all users, not just those using assistive technologies:
When links are vague or unclear, they create friction and uncertainty that affects every user's experience, while descriptive links create confidence and efficiency in navigation.
Vague link text doesn't just create accessibility barriers—it creates usability problems for everyone. When users can't predict where a link leads, they hesitate to click, abandon tasks, or waste time following links that don't meet their needs. This uncertainty can significantly impact user engagement and conversion rates.
Creating good link text follows several key principles that make navigation clear and predictable:
Link text should make sense even when read out of context, without relying on surrounding text for meaning.
<!-- Vague - depends on context to understand -->
<p>Our annual sustainability report shows our environmental progress.
<a href="/sustainability-report.pdf">Click here</a> to read it.</p>
<!-- Clear - makes sense on its own -->
<p>Our annual sustainability report shows our environmental progress.
<a href="/sustainability-report.pdf">Download 2024 sustainability report (PDF)</a>.</p>Tell users exactly what they'll find when they click, including page types, document formats, or external sites.
<!-- Generic -->
<a href="/products">Learn more</a>
<!-- Specific -->
<a href="/products">Browse our product catalog</a>
<!-- Even better - indicates what type of content -->
<a href="/case-studies">Read customer success stories</a>
<a href="/pricing">View pricing plans</a>
<a href="/contact">Contact our sales team</a>Aim for link text that's long enough to be descriptive but short enough to scan quickly—typically 2-8 words.
<!-- Too short -->
<a href="/help">Help</a>
<!-- Too long -->
<a href="/help">Click here to access our comprehensive customer support center with FAQs, tutorials, and contact information</a>
<!-- Just right -->
<a href="/help">Customer support center</a>
<a href="/help">Get help and FAQs</a>For links that perform actions, use verbs that clearly indicate what will happen.
<!-- Clear action words -->
<a href="/signup">Create your account</a>
<a href="/checkout">Complete your purchase</a>
<a href="/newsletter">Subscribe to updates</a>
<a href="/demo">Schedule a demo</a>
<a href="/download">Download the app</a>Different types of links require different approaches to descriptive text:
Primary navigation should use clear, descriptive labels that match page titles and user expectations.
<!-- Good navigation link text -->
<nav>
<a href="/about">About us</a>
<a href="/services">Our services</a>
<a href="/portfolio">Our work</a>
<a href="/blog">Latest news</a>
<a href="/contact">Contact us</a>
</nav>
<!-- For e-commerce -->
<nav>
<a href="/women">Women's clothing</a>
<a href="/men">Men's clothing</a>
<a href="/accessories">Accessories</a>
<a href="/sale">Sale items</a>
</nav>Always indicate file type, size (when significant), and what the document contains.
<!-- Clear document links -->
<a href="/annual-report-2024.pdf">2024 annual report (PDF, 2.3MB)</a>
<a href="/product-manual.pdf">Installation guide (PDF)</a>
<a href="/price-list.xlsx">Current price list (Excel spreadsheet)</a>
<a href="/application-form.docx">Job application form (Word document)</a>
<!-- For accessibility, you can also use aria-label for additional context -->
<a href="/contract.pdf" aria-label="Service contract PDF, 5 pages">
Service contract (PDF)
</a>Indicate when links lead to external sites so users aren't surprised by the destination.
<!-- Clear external link indicators -->
<a href="https://example.com" target="_blank" rel="noopener">
Visit Example.com (opens in new window)
</a>
<!-- Using icons with text -->
<a href="https://twitter.com/company" target="_blank" rel="noopener">
Follow us on Twitter (external link)
</a>
<!-- CSS approach with icons -->
<a href="https://example.com" class="external-link" target="_blank" rel="noopener">
Example.com
</a>
/* CSS */
.external-link::after {
content: " (external link)";
font-size: 0.9em;
color: #666;
}CTAs should clearly indicate the action and often the benefit or outcome.
<!-- Effective CTA link text -->
<a href="/signup" class="cta-button">Start free trial</a>
<a href="/demo" class="cta-button">See how it works</a>
<a href="/pricing" class="cta-button">View pricing plans</a>
<a href="/contact-sales" class="cta-button">Talk to sales</a>
<a href="/download" class="cta-button">Get the app</a>
<!-- Context-specific CTAs -->
<a href="/enterprise-demo">Schedule enterprise demo</a>
<a href="/free-consultation">Book free consultation</a>
<a href="/quote-request">Request custom quote</a>Instead of generic "read more," specify what users will read more about.
<!-- Generic approach -->
<article>
<h2>New Product Launch</h2>
<p>We're excited to announce our latest innovation...</p>
<a href="/product-launch-details">Read more</a>
</article>
<!-- Better approach -->
<article>
<h2>New Product Launch</h2>
<p>We're excited to announce our latest innovation...</p>
<a href="/product-launch-details">Read full product announcement</a>
</article>
<!-- Even better - include the specific topic -->
<article>
<h2>New Product Launch</h2>
<p>We're excited to announce our latest innovation...</p>
<a href="/product-launch-details">Read more about the new product launch</a>
</article>Even with good intentions, several common mistakes can undermine link effectiveness:
What's happening: Using phrases like "click here," "read more," "learn more," or "find out more" without specifying what users will find.
Simple solution: Replace generic phrases with specific descriptions of the destination or action:
<!-- Before -->
To improve your website's performance, <a href="/guide">click here</a>.
<!-- After -->
To improve your website's performance, <a href="/guide">read our optimization guide</a>.
<!-- Before -->
Our new features will help your team. <a href="/features">Learn more</a>.
<!-- After -->
Our new features will help your team. <a href="/features">Explore collaboration features</a>.What's happening: Using raw URLs or meaningless file names as link text.
Simple solution: Replace URLs with descriptive text that explains the content:
<!-- Before -->
Visit <a href="https://www.example.com/products/software/crm/features.html">
https://www.example.com/products/software/crm/features.html</a> for details.
<!-- After -->
Visit our <a href="https://www.example.com/products/software/crm/features.html">
CRM software features page</a> for details.
<!-- Before -->
Download <a href="/files/report_2024_q3_final_v2.pdf">report_2024_q3_final_v2.pdf</a>
<!-- After -->
Download <a href="/files/report_2024_q3_final_v2.pdf">Q3 2024 quarterly report (PDF)</a>What's happening: Multiple links on the same page have identical text but lead to different destinations, confusing screen reader users.
Simple solution: Make each link's text unique and specific to its destination:
<!-- Before - confusing when out of context -->
<article>
<h3>Web Development Services</h3>
<p>We build custom websites...</p>
<a href="/web-development">Learn more</a>
</article>
<article>
<h3>Mobile App Development</h3>
<p>We create mobile applications...</p>
<a href="/mobile-development">Learn more</a>
</article>
<!-- After - clear and specific -->
<article>
<h3>Web Development Services</h3>
<p>We build custom websites...</p>
<a href="/web-development">Learn about web development</a>
</article>
<article>
<h3>Mobile App Development</h3>
<p>We create mobile applications...</p>
<a href="/mobile-development">Learn about mobile app development</a>
</article>What's happening: Link text promises one thing but the destination delivers something different.
Simple solution: Ensure link text accurately represents the destination content:
<!-- Before - misleading -->
<a href="/blog/general-tips">Complete guide to web accessibility</a>
<!-- Links to a brief blog post with general tips -->
<!-- After - accurate -->
<a href="/blog/general-tips">5 quick accessibility tips for beginners</a>
<!-- Before - overpromising -->
<a href="/contact-form">Get instant support</a>
<!-- Links to a contact form, not live chat -->
<!-- After - realistic -->
<a href="/contact-form">Contact our support team</a>What's happening: Link text is so long it becomes difficult to scan, or uses technical jargon that users don't understand.
Simple solution: Keep link text concise and use language your audience understands:
<!-- Before - too long -->
<a href="/api-docs">Complete comprehensive documentation for our RESTful API including authentication methods, endpoint specifications, and code examples</a>
<!-- After - concise -->
<a href="/api-docs">API documentation</a>
<!-- Before - too technical -->
<a href="/security">Learn about our ISO 27001 certified security infrastructure</a>
<!-- After - accessible language -->
<a href="/security">Learn about our security measures</a>Some situations require more sophisticated approaches to link text:
When you need to provide more context than fits comfortably in visible link text, use aria-label.
<!-- Visible text is short, but screen readers get more context -->
<a href="/report-2024.pdf" aria-label="Annual report 2024 PDF, 45 pages">
Annual Report
</a>
<!-- For product links in lists -->
<a href="/product/laptop-abc123" aria-label="View details for ABC123 laptop priced at $899">
ABC123 Laptop - $899
</a>
<!-- For social media links -->
<a href="https://twitter.com/company" aria-label="Follow Company Name on Twitter">
Twitter
</a>When links appear within longer content blocks, ensure they make sense both in context and when listed separately.
<!-- Good approach for inline links -->
<p>
Our latest research shows significant improvements in user engagement.
The <a href="/research/engagement-study-2024">complete engagement study</a>
includes detailed methodology and findings. You can also review our
<a href="/research/previous-studies">previous research studies</a>
for comparison.
</p>
<!-- Each link makes sense independently:
- "complete engagement study"
- "previous research studies" -->When entire cards or blocks are clickable, ensure the link text encompasses the key information.
<!-- Good pattern for accessible card links -->
<article class="product-card">
<img src="product.jpg" alt="Blue wireless headphones">
<h3>
<a href="/products/wireless-headphones-pro">
Wireless Headphones Pro - $199
</a>
</h3>
<p>Premium sound quality with 30-hour battery life.</p>
</article>
<!-- Alternative pattern with spanning link -->
<article class="news-card">
<a href="/news/company-expansion" class="card-link">
<img src="office.jpg" alt="New office building">
<h3>Company Opens New Seattle Office</h3>
<p>Expanding our West Coast presence with 200 new jobs...</p>
<span class="read-more">Read full announcement</span>
</a>
</article>Regular testing ensures your link text creates clear, usable navigation:
The most valuable test is simple: can you understand where each link leads based solely on its text, without reading the surrounding content?
Clear, descriptive link text delivers measurable business advantages:
These benefits combine to create websites that are more effective at achieving business goals while providing better experiences for all users.
Different types of websites can benefit from tailored approaches to descriptive link text:
In each case, the key is understanding your users' goals and using language that matches their mental models and expectations.
Descriptive link text is fundamentally about building trust and setting clear expectations. Every link on your website is essentially a promise to your users about what they'll find when they click. When that promise is vague or misleading, you break trust and create friction in the user experience.
What makes descriptive link text particularly powerful is its universal benefit. While it's essential for users of assistive technologies who rely on link lists for navigation, it also helps every user make better decisions about where to spend their time and attention on your website.
The practice of writing good link text also encourages better content organization and clearer thinking about user journeys. When you're forced to describe each link's destination clearly, you naturally create more logical, user-centered navigation structures.
In our increasingly complex digital landscape, the simple act of writing clear, descriptive link text stands out as both a basic courtesy to users and a competitive advantage for businesses. It's a small detail that makes a big difference in creating websites that truly serve their users' needs.
Greadme's easy-to-use tools can help you identify vague or problematic link text on your website and provide simple instructions to make every link descriptive and helpful—even if you're not technically minded.
Analyze Your Website's Link Text Today