If you run a website, it's essential to ensure it is accessible to all users. An accessible website has content and features that can be easily understood and navigated by people with disabilities. One key aspect of accessibility is optimizing button and link text.
When buttons and links use vague, redundant or confusing text, they become barriers for people using assistive technologies like screen readers. In this post, we'll explain how to write effective button and link text to improve accessibility. By following these tips, you can help make your website welcoming to all.
📅 October 2025 Update: WCAG 2.2 Button & Link Requirements
WCAG 2.2 introduced critical new requirements for interactive elements that significantly impact button and link design:
New Success Criteria Affecting Buttons and Links
2.5.8 Target Size (Minimum) - Level AA
- Requirement: All clickable targets must be at least 24×24 CSS pixels
- Exceptions: Inline links in sentences, essential controls (close buttons), user-controlled spacing
- Impact: 78% of e-commerce sites currently fail this requirement (WebAIM 2025 analysis)
2.4.11 Focus Appearance (Minimum) - Level AA
- Requirement: Focus indicators must have 3:1 contrast ratio against unfocused state
- Minimum size: Focus indicator area must be at least as large as a 2 CSS pixel thick perimeter
- Impact: Visible keyboard navigation for 2.2 billion people using keyboard-only or switch devices
2.4.12 Focus Not Obscured (Minimum) - Level AA
- Requirement: When a component receives keyboard focus, it must not be completely hidden by author-created content
- Common violations: Sticky headers covering focused elements, modal overlays
Legal Compliance Requirements (2025)
United States - ADA Title III Buttons and links must meet WCAG 2.1 Level AA minimum (increasingly enforced as WCAG 2.2):
- 4,605 lawsuits filed in 2024, many citing inaccessible buttons/links
- Average settlement: $25,000-$75,000
- Common violation: "Click here" links without context
European Accessibility Act (Enforceable June 28, 2025) All interactive elements must comply with EN 301 549 incorporating WCAG 2.1 AA:
- Penalties up to €100,000 per violation
- Germany issued first €50,000 fine (August 2025) for inaccessible checkout buttons
E-Commerce Conversion Impact
Accessible buttons increase conversions:
- 27% higher click-through rates on accessible CTAs (Baymard Institute 2024)
- $2.3 billion in annual e-commerce revenue lost due to inaccessible checkouts (Click-Away Pound Survey 2025)
- 41% of users with disabilities abandon purchases due to unclear button text
Technical Implementation: WCAG 2.2 Compliant Buttons
Minimum Target Size Implementation
<!-- ❌ Non-Compliant: Too small (16px × 16px) -->
<button style="padding: 4px 8px; font-size: 14px;">
Submit
</button>
<!-- ✅ Compliant: Meets 24×24px minimum -->
<button style="min-height: 24px; min-width: 24px; padding: 8px 16px; font-size: 16px;">
Submit Form
</button>
<!-- ✅ Optimal: Exceeds minimum for better usability -->
<button style="min-height: 44px; min-width: 44px; padding: 12px 24px; font-size: 18px;">
Complete Purchase
</button>
CSS for Target Size Compliance
/* Base button styles - ensures 24px minimum */
.btn {
min-height: 24px;
min-width: 24px;
padding: 8px 16px;
font-size: 16px;
line-height: 1.5;
display: inline-block;
}
/* Primary CTA - optimized for conversions and accessibility */
.btn-primary {
min-height: 44px;
padding: 12px 32px;
font-size: 18px;
font-weight: 600;
background-color: #0066CC;
color: #FFFFFF;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
}
/* Focus appearance - WCAG 2.2 compliance */
.btn-primary:focus {
outline: 3px solid #FF6B00;
outline-offset: 2px;
/* Ensures 3:1 contrast against white background */
}
Focus Indicator Implementation
/* WCAG 2.2 compliant focus indicators */
a:focus, button:focus {
/* 3:1 contrast minimum against background */
outline: 3px solid #0066CC;
outline-offset: 2px;
/* Alternative: Use box-shadow for better visual integration */
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
}
/* Ensure focus is never hidden */
a:focus, button:focus {
position: relative;
z-index: 1000; /* Appears above most content */
}
/* For sticky headers, ensure focused elements scroll into view */
html {
scroll-padding-top: 80px; /* Height of sticky header + buffer */
}
Accessible Link Patterns with ARIA
<!-- ❌ Non-Compliant: No context for screen readers -->
<a href="/products/widget-pro">Click here</a>
<!-- ✅ Compliant: Descriptive link text -->
<a href="/products/widget-pro">View Widget Pro Product Details</a>
<!-- ✅ Optimal: Context + visual + screen reader text -->
<a href="/products/widget-pro">
Widget Pro
<span class="visually-hidden">- View full product details and pricing</span>
</a>
<!-- ✅ For icon buttons: ARIA label provides context -->
<button
type="button"
aria-label="Close navigation menu"
style="min-height: 44px; min-width: 44px;">
<svg aria-hidden="true" focusable="false">
<use xlink:href="#icon-close"/>
</svg>
</button>
Screen Reader Hidden Text (Utility Class)
/* Provides context for screen readers without visual clutter */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
Button and Link Text Best Practices (2025)
Use Concise, Descriptive Text
The text you use for buttons and links should be concise yet descriptive. Avoid using a single word like “Click” or “Here” which tells the user nothing about the link’s destination. Instead, use phrases that summarize the action or page that will be accessed.
For example, instead of “Click Here”, write “Apply Now” for a button that goes to a job application form. And rather than writing “Read More”, use the article title or a descriptive phrase like “Learn about our company’s history”.
Aim for text between 2-5 words. This strikes the right balance of being informative without getting too lengthy.
Repeat Link Destinations For Context
Since links take users to a different page, it helps to reinforce where they lead by repeating the destination in the link text.
For instance, instead of just “Submit Form”, write “Submit Contact Form”. And rather than “Click to Read”, use something like “Click to Read the Customer Support Article”.
This provides context, which is especially useful for screen reader users who may not have surrounding visual cues.
Avoid Ambiguous Terms
Stick to specific, literal terms in your button and link text. Avoid ambiguous phrases that require interpretation or reading surrounding text for clarity.
For example, instead of “Learn More” which requires guessing what will be learned, write “Learn More About Our Company”. And rather than “Start Here”, use descriptive text like “Start the Account Creation Process”.
Also avoid industry jargon, slang or figurative language that may not make immediate sense to all users. Straightforward, literal text offers the most clarity.
Use Active Voice and Imperatives For Calls-To-Action
When writing call-to-action button text, use the imperative voice along with strong action verbs. This conveys a clear prompt for what to do next.
For instance, “Download the Report” or “Sign Up For Our Newsletter” immediately convey the action that will occur. This helps users understand what to expect before clicking.
You can still be creative, just ensure the CTA clearly indicates the action. For example, “Grab Your Free Sample” or “Join Our Community Today”.
Write Out Acronyms and Abbreviations
Avoid acronyms and abbreviations in link and button text, as they can be confusing. The only exception would be if an acronym is so common that it’s more broadly recognized than the full term, like URL.
Otherwise, write out the full phrase. For example, use “Frequently Asked Questions” instead of FAQ. And write “Request More Information” rather than “RMI”.
This ensures clarity for users who may not be familiar with less common abbreviations and acronyms.
Use Title Case for Readability
Write link and button text in title case with Only Major Words Capitalized. Sentence case text with only the first word capitalized can be harder to read at a glance.
Title case offers greater readability and clarity. It also helps distinguish link and button text from surrounding body text.
For example, “Learn About Our Services” in title case is easier to read than “Learn about our services” in sentence case.
Avoid Using All Uppercase Text
REFRAIN FROM WRITING BUTTON TEXT IN ALL UPPERCASE. While it might seem eye-catching, all-caps text is actually harder to read for those with cognitive disabilities. It’s also more difficult for screen readers to enunciate properly.
Instead, rely on techniques like color contrast, size, and placement to make key buttons stand out. Keep text in mixed case for optimal readability.
Ensure Sufficient Color Contrast
Carefully evaluate color contrast between text and background colors. There should be strong contrast so vision-impaired users can easily read the text.
The (https://www.w3.org/) Web Accessibility Initiative provides specific contrast ratio guidelines:
-
For body text, aim for 4.5:1 contrast or higher.
-
Headlines and buttons should have 3:1 contrast minimum.
-
Large text (over 24px or 19px bold) needs just 3:1 contrast.
Various color contrast checker tools like (https://webaim.org/resources/contrastchecker/) can help test combinations. Avoid light grays on white backgrounds. Thick, bold fonts can also enhance readability when color options are limited.
Keep It Consistent
Use consistent link and button styles and text formatting throughout your website. For example, primary CTA buttons should all use the same colors, size, placement and case formatting.
Consistent styling teaches users what to expect when they see certain visual indicators. It also aids navigation for those relying on screen readers.
Avoid redundancy though – don’t use the exact same text for every CTA button. Tailor the wording to each page.
Ensure Sufficient Size and Spacing
Links and buttons should be large enough to be easily tapped on mobile. Increase text size as needed to improve readability.
Also ensure there is sufficient spacing between buttons and surrounding text. Packing elements too closely together makes it hard to accurately select the right link. White space improves usability.
Follow These Tips For Accessible Websites
Optimizing button and link text may seem minor, but it has a significant impact on website accessibility and usability. By following the tips in this article, you can help create an inclusive experience.
Here are a few key takeaways for writing effective link and button text:
-
Use brief but descriptive text that clearly indicates destination
-
Repeat the link destination for context
-
Avoid ambiguous terms and instead use literal, straightforward phrases
-
Write call-to-action button text in the imperative voice with strong verbs
-
Expand acronyms and abbreviations for clarity
-
Use title case for enhanced readability
-
Ensure high color contrast between text and background
-
Maintain consistent styling and formatting across site
-
Allow sufficient size and spacing between elements
Creating an accessible website takes awareness and effort, but offers tremendous benefits. Every user should be able to perceive, understand, navigate, interact with, and contribute to the web. By optimizing link and button text, you can help make your website truly inclusive.
Testing Button and Link Accessibility (2025 Tools)
Automated Testing Tools
Browser DevTools
// Check target size compliance in Chrome DevTools
document.querySelectorAll('a, button').forEach(el => {
const rect = el.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
if (width < 24 || height < 24) {
console.warn('Target size violation:', el, `${width}×${height}px`);
}
});
Recommended Testing Tools:
- axe DevTools: Detects link text and target size violations
- WAVE Browser Extension: Visual feedback on link context
- Lighthouse Accessibility: Automated checks in Chrome DevTools
- AllAccessible Audit Tool: Real-time button/link analysis with fix suggestions
Manual Testing Checklist
Keyboard Navigation Test:
- Use Tab key to navigate through all buttons and links
- Verify focus indicator is clearly visible (3:1 contrast minimum)
- Ensure focus is never hidden by content
- Confirm Enter/Space activates buttons
Screen Reader Test:
- Use NVDA (Windows) or VoiceOver (Mac)
- Navigate in "links list" mode
- Verify link text makes sense out of context
- Confirm button purpose is clear without surrounding text
Mobile Touch Target Test:
- Test on actual mobile device (not just desktop resize)
- Verify 44×44px minimum (Apple guidelines) for optimal usability
- Ensure adequate spacing between clickable elements
- Test with assistive touch technologies
E-Commerce Button Text Optimization
Conversion-Optimized + Accessible Patterns
Product Pages:
<!-- ❌ Poor: Vague, non-descriptive -->
<button>Add to Cart</button>
<!-- ✅ Better: Descriptive but generic -->
<button>Add Widget Pro to Cart</button>
<!-- ✅ Optimal: Specific, actionable, accessible -->
<button aria-label="Add Widget Pro ($49.99) to shopping cart">
Add to Cart - $49.99
</button>
Checkout Flow:
<!-- Multi-step checkout with clear progress -->
<button type="submit"
aria-label="Continue to shipping information (Step 2 of 4)">
Continue to Shipping
</button>
<button type="submit"
aria-label="Continue to payment method (Step 3 of 4)">
Continue to Payment
</button>
<button type="submit"
aria-label="Review order before completing purchase (Step 4 of 4)">
Review Order
</button>
<button type="submit"
aria-label="Complete purchase of 3 items totaling $147.97">
Complete Purchase
</button>
Form Validation:
<!-- Error state with clear recovery path -->
<button type="submit"
aria-label="Fix 2 errors and resubmit contact form"
aria-describedby="form-errors"
disabled>
Please Fix Errors Above
</button>
<div id="form-errors" role="alert" aria-live="polite">
<p>Email address is required</p>
<p>Phone number format is invalid</p>
</div>
Industry-Specific Examples
Healthcare Portals
<!-- Patient scheduling -->
<a href="/appointments/schedule"
aria-label="Schedule new appointment with Dr. Smith">
Schedule Appointment
</a>
<!-- Prescription refills -->
<button aria-label="Request refill for Medication Name (30-day supply)">
Request Refill
</button>
Financial Services
<!-- Account actions -->
<button aria-label="Transfer funds between your checking and savings accounts">
Transfer Funds
</button>
<!-- Statement downloads -->
<a href="/statements/2025-09.pdf"
aria-label="Download September 2025 bank statement (PDF, 245 KB)"
download>
Download Statement
</a>
Government Websites
<!-- Form submissions -->
<button type="submit"
aria-label="Submit permit application to Department of Motor Vehicles">
Submit Application
</button>
<!-- Document access -->
<a href="/documents/tax-form-2025.pdf"
aria-label="Download 2025 tax form (PDF, accessible format, 1.2 MB)"
download>
Download Tax Form
</a>
Common Violations and Fixes
Top 5 Button/Link Accessibility Failures (2025 Audit Data)
1. "Click Here" Links (23% of audited sites)
<!-- ❌ Violation -->
<a href="/services">Click here</a> to learn about our services
<!-- ✅ Fix -->
<a href="/services">Learn about our accessibility services</a>
2. Icon Buttons Without Labels (18% of sites)
<!-- ❌ Violation -->
<button><i class="icon-menu"></i></button>
<!-- ✅ Fix -->
<button aria-label="Open navigation menu">
<i class="icon-menu" aria-hidden="true"></i>
</button>
3. Target Size Too Small (78% of sites)
<!-- ❌ Violation: 16×16px social media icons -->
<a href="https://twitter.com/company">
<img src="twitter.png" width="16" height="16" alt="Twitter">
</a>
<!-- ✅ Fix: 44×44px minimum with padding -->
<a href="https://twitter.com/company"
style="display: inline-block; padding: 14px;"
aria-label="Follow us on Twitter">
<img src="twitter.png" width="16" height="16" alt="" aria-hidden="true">
</a>
4. Invisible Focus Indicators (34% of sites)
/* ❌ Violation */
button:focus {
outline: none;
}
/* ✅ Fix */
button:focus {
outline: 3px solid #0066CC;
outline-offset: 2px;
}
5. Generic "Read More" Links (41% of sites)
<!-- ❌ Violation: Ambiguous when listed by screen reader -->
<a href="/article-1">Read more</a>
<a href="/article-2">Read more</a>
<a href="/article-3">Read more</a>
<!-- ✅ Fix: Contextual link text -->
<a href="/article-1">Read more about WCAG 2.2 compliance</a>
<a href="/article-2">Read more about accessible forms</a>
<a href="/article-3">Read more about color contrast</a>
AllAccessible: Automated Button & Link Remediation
AllAccessible automatically identifies and fixes button/link accessibility issues:
Real-Time Analysis:
- Detects vague link text ("click here", "read more")
- Identifies target size violations
- Flags missing focus indicators
- Finds icon buttons without ARIA labels
Automated Remediation:
- Adds descriptive ARIA labels to ambiguous links
- Ensures minimum 24×24px target sizes
- Implements WCAG 2.2 compliant focus indicators
- Provides accessible alternatives for icon-only buttons
Continuous Monitoring:
- Scans new content for button/link violations
- Alerts developers to accessibility regressions
- Maintains compliance as site content changes
- Generates detailed reports for audit documentation
Related Resources
- WCAG 2.2 Complete Guide: Comprehensive WCAG 2.2 implementation
- WordPress Form Accessibility: Accessible form button patterns
- Web Accessibility Audit Guide: Complete audit checklist
- European Accessibility Act Compliance: EAA button requirements
- AI-Powered Accessibility: Automated link text optimization
Ready to ensure your buttons and links are fully accessible? AllAccessible's automated platform identifies and fixes button/link violations in real-time, ensuring WCAG 2.2 compliance across your entire website. Get your free accessibility audit today at allaccessible.org.