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.
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 W3C 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 WebAIM 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 inclusive for all.