Unique and descriptive link text
Explanation
ProvidingUsing meaningfulclear link text has severallots advantages.of benefits. It makeshelps web content more accessible for userspeople with disabilities,disabilities suchwho asuse thosethings usinglike screen readers, bybut clearlyit indicatingalso helps everyone else find their way around. Your text should show the purposereason offor each link. ThisYour helpsreader themshould navigateknow withoutwhere needingthey extraare context.going For- alland users,what clearthey linkwill textfind improveswhen they get there - based on the overall experience by making it easier to understand where each link will take them.link.
Search engines also benefit from meaningful link text, as it helps them understand the content of the linked page, which can improve your site’s search engine ranking. For users with cognitive limitations, clear link text reduceskeeps confusionpeople andfrom helpsgetting confused. It gives them the information they need to make better decisions about which links to follow. Additionally, usersPeople who navigate usinguse a keyboard canto moreget easilyaround on their computer instead of a mouse or touchscreen tab through links and understand their purpose,purpose. whichThis iscan especiallybe extra helpful for someone who has a physical limitation and can't use one of those withother mobilityways impairments.to connect.
SuccessAll Criterionof 2.4.4your includeslinks hyperlinkedshould images.be clear, including a picture on the page that acts like a link. It requiresmight thatnot have visible text but it still should tell users where they are going. Setting the photo's alternative text is enough as long as it explains the purpose ofand eachdestination link,for includingthe thoselink. createdOf withcourse, images,someone canwho is not using special tools should be determinedable to figure out where they are going from the link text alone or from the link text together with its context. For images, this means providing appropriate alternative text that describes the purpose of the link.
The Web Content Accessibility Guidelines (WCAG) 2.1 require that the purpose of the link can be determined. This WCAG Success Criterion (SC 2.4.4) requires that "the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general." Learn more about SC 2.4.4 at picture.
Demonstration
In the demonstration videos below, the user is searching for a link in a document by jumping from link to link using NVDA's single-key navigation. Since they are only listening to links, they won't hear the context provided by the surrounding text. In the first video (Screen reader demonstration: Unique and descriptive link names (BAD), 0:41), links lack descriptive names or titles. The 'Click here to read more' links are not unique and require the user to navigate to the surrounding content to understand the meaning. The second video (Screen reader demonstration: Unique and descriptive link names (GOOD), 0:44) shows the same text but with unique and descriptive link text. It's more user-friendly for both assistive technology users and for those without disabilities.
Screen reader demonstration: Unique and descriptive link names (BAD)
Screen reader demonstration: Unique and descriptive link names (GOOD)
TechniquesSuggested techniques
IncludeSource: Understanding Success Criterion 2.4.4: Link Purpose (In Context) (w3.org)
Each numbered item in this section represents a technique or combination of techniques for fixingthat the problem.WCAG IfWorking it'sGroup general,deems justsufficient spellfor meeting this Success Criterion. However, it outis here.not Ifnecessary it's application-specific,to use Mediumthese headingsparticular techniques. For information on using other techniques, see Understanding Techniques for eachWCAG softwareSuccess type.Criteria, Stickparticularly the "Other Techniques" section.
Sufficient techniques
- G91: Providing link text that describes the purpose of a link
- H30: Providing link text that describes the purpose of a link for anchor elements
- H24: Providing text alternatives for the area elements of image maps
-
Allowing the user to
groupschooseasshortmuchoraslongpossiblelink text using one of the techniques below: - G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence
-
Providing a supplemental description of the purpose of a link using one of the following techniques:
-
Identifying the purpose of a link using link text combined with programmatically determined link context using one of the following techniques:
- ARIA7: Using aria-labelledby for link purpose
- ARIA8: Using aria-label for link purpose
- H77: Identifying the purpose of a link using link text combined with its enclosing list item
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph
- H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells
- H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested
Web Content Accessibility Guidelines (MicrosoftWCAG)
WCAG Google2.1 Workspaces,requires that the purpose of the link can be determined. It's part of the Operable principle and makes sure that visitors can navigate your information. There are 2 Success Criteria for Link Purpose.
- SC 2.4.4 (Link Purpose (In Context)) requires that "the purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general." SC 2.4.4 is a level A criterion that represents the minimum level of accessible content.
- SC 2.4.9 (Link Purpose (Link Only)) says that users can figure out the purpose of your link from the link text alone. While SC 2.4.4 considers the text around the link, SC 2.4.9 only considers the link itself. It's helpful for a tool that collects a list of links on
theyourWeb)page,ratherforthanexample.individualSCsoftware.2.4.9If it's worth discussingis aspecificLevelapplicationAAAfeature,criterionit'swhichworthprovidesincludingthe greatest accessibility.
Exception: Links that are "ambiguous to users in general" don't have to meet these criteria. For example, if my page says, "Sally has 124 puppies for sale" and the word "puppies" is a screenshot.
Wherethen applicable,none provideof moreyour thanusers onewill optionknow forwhat addressingit is until they click it. It could be a photo of a puppy, a link to a puppy ad, or open an email message addressed to the issue.puppies. TryA user without a disability doesn't know what to include a range of effort levels. Reference/cross reference standardsexpect and includedoesn't linkshave whenany necessary.advantage over someone using assistive technology.
Learn more
Include either a bulleted list of external links and resources (internal ones should be linked in context above) or Medium headings that include a description as well as the link. Links should have unique and descriptive names.