Hyperlinks: Make links clear and useful
What you will learn
You will learn how to write link text that is easy to scan and easy to understand. This helps everyone, especially people who use a keyboard or a screen reader.
Writing effective links
Good links tell people exactly what they will get. Clear link text saves time, reduces confusion, and helps people decide if they should follow the link. It also helps people who scan a list of links without the surrounding paragraph.
When writing links, use short, descriptive text that names the action or the destination. For example, "Apply for travel reimbursement" tells users exactly what will happen when they follow the link. Avoid vague phrases like "click here", "read more", or pasting long web addresses, as these do not explain the purpose of the link.
Put the link on the words that matter, not on a whole sentence. This approach improves scannability and makes it easier for screen reader users to navigate. If the link opens a file, mention this when it helps users make decisions, such as "Quarterly results (PDF)" or "Budget template (Excel, 125 KB)".
When you have several similar links, make each one specific to avoid confusion. Instead of multiple "Read more" links, use descriptive text like "Benefits overview" and "Benefits eligibility dates". This specificity helps all users, especially those using assistive technology.
Context and placement
Place links close to the information they relate to. If you need to explain why a link is useful, add a short line before the link rather than relying on visual cues. Avoid writing "the link on the right" or other directional references that don't work for all users.
For file downloads, use clear file names and link text so people know what they're getting. Mention the file type and size when it could affect someone's choice to download. When possible, share the main, up-to-date location rather than copies that may become outdated.
Common issues and solutions
Many accessibility problems with links come from a few common mistakes. Instead of "click here" links, use action-oriented text like "Complete security training". This approach works better for everyone and provides clear expectations about what will happen.
Transform bare URLs into descriptive links whenever possible. Keep bare URLs only when people specifically need to copy the web address. For example, instead of displaying "https://example.com/training", use "Online security training portal".
Avoid using the same vague link text for different destinations. Each link should be unique and descriptive. Make sure links are visually distinct from regular text by using underlines or other clear visual cues that don't rely on color alone.
Testing your links
To verify your links work well for everyone, try these simple checks:
- Read links aloud: Go through each link on the page individually. Do they make sense without the surrounding text?
- Test keyboard navigation: Use the Tab key to move through links. Is the order logical? Can you clearly see which link has focus?
- Check visual contrast: Ensure links are easy to distinguish from body text, even in black and white.
Creating accessible links step-by-step
Follow these detailed instructions to create links that work well for everyone, including screen reader users:
Writing effective link text
Choose 2-5 words that clearly describe the destination or action. Good examples include "Submit expense report" or "Download user manual". Screen readers can list all links on a page, so each link should be understandable on its own. Test this by asking yourself: Would the link text make sense in a list without any surrounding context?
Include the action or destination in your link text. Action examples include "Download", "Apply", "Register", or "Contact". Destination examples include "Privacy policy", "User guide", or "Contact page". This approach helps users understand exactly what will happen when they activate the link.
Creating links in different applications
Most modern applications use similar methods for creating links. First, type your descriptive link text (such as "Employee benefits overview"). Then select the text and use the application's link creation feature, which is typically available through the Insert menu or keyboard shortcuts.
When editing existing links, look for options like "Edit Link" or "Edit Hyperlink" in the right-click context menu. Update the display text to be more descriptive while keeping the destination URL the same.
Linking to files and documents
When linking to downloadable files, include helpful information in your link text. Examples include "Annual report 2024 (PDF, 2.5 MB)" or "Budget template (Excel, 125 KB)". This information helps users decide whether to download the file and prepare for the file size.
Use clear file names that match your link text. Instead of generic names like "Document1" or "Final_version_v3", use descriptive names like "Employee handbook March 2024". This consistency helps users identify files after download.
Making links visually accessible
Ensure links are clearly distinguishable from regular text. Underlines are the most reliable way to indicate links, as they work for users who cannot distinguish colors. Don't use color alone to indicate links, and make sure your link colors meet accessibility contrast requirements.
Test link visibility by viewing your document in black and white or asking someone to quickly scan and identify all links. Links should be immediately recognizable as interactive elements.
Special considerations for email and telephone links
For email links, use descriptive text like "Contact support team" rather than displaying the raw email address. For telephone links, include context about the purpose: "Call customer service: 1-800-555-0123". Link the entire phrase, not just the number, to provide better context for screen reader users.
Fixing common link problems
Replace generic phrases like "click here" with specific actions. Instead of "For more information, click here", use "Read the complete user guide". This change moves the descriptive words into the link itself, making it more useful for all users.
Convert bare URLs to descriptive text whenever possible. Keep bare URLs only when users specifically need to copy the web address. Avoid duplicate link text by making each link unique - instead of multiple "Read more" links, use "Read more about benefits" and "Read more about policies".
Testing your links
Simulate how screen reader users experience your links by reading only the link text aloud, ignoring surrounding text. Each link should make sense on its own and clearly indicate where it will take users.
Perform a visual scan test by quickly looking at your page and identifying only the blue or underlined text. All links should be easy to spot and stand out from regular text. Finally, use the Tab key to navigate through all links and verify that the order is logical and focus is clearly visible on each link.
Standards and resources
- CAN/ASC – EN 301 549:2024 Accessibility requirements for ICT products and services: Official publication
- BATI/ITAO Accessible Documents resources: Accessible documents