Links
Link text should be concise, informative, and indicative of where the link goes.
Link text
Consider the following questions when writing link text:
If the link existed in isolation without any surrounding context, could its purpose be determined?
If multiple links share the same text, do they go to the same location?
If not, how does someone navigating by link text alone differentiate between destinations?
Does the link open in a new tab or window? Has that been communicated?
Visual styling
For links that exist within mixed content, such as in the middle of a paragraph or within a data table, there must be a visual indicator that is not solely dependent on color. This is frequently represented by a text underline.
Neither bold nor italic text is recommended for link visual indicators, as these styles are more typically reserved for emphasis.
A visual indicator is not required when the link exists within a block of content that is exclusively links, such as a navigation menu, as it is more predictable to an individual as to what text is interactive.
External links
If linking to external content or file types that open in a new tab or window, include a warning of the impending context change within the link text.
Example: Five-year strategy (Opens in new tab)
If not including a warning, the link should open in the same tab or same window.
Image links
When wrapping a link around an image, the alt text of the image should be used for the link text rather than describing the image.
<a href="#"><img src="power-outages.jpg" alt=”Open map to check whether your power outage has been reported.” /></a>
Note:
Using an aria-label on the link element of an image link is an alternative to using the alt attribute on the image itself. However, for screen readers NVDA and JAWS, the aria-label takes precedence and the image alt text is not heard. For VoiceOver, both elements may be read.
Anchor links
Anchor links are in-page links that “jump” visitors to a specific section of the page or application rather than going to another page. Typically, anchor links jump to headings. Therefore, if configuring your own anchor links, it is best to use similar language between the link and the heading text.
Note:
Applications may also use off-screen anchor links that display when they receive keyboard focus. These help individuals navigating by keyboard to bypass large blocks of repetitive content, such as navigation menus. A common pattern is to include a Skip navigation link at the top of the page, which transfers focus to the main landmark role containing the body content.
URL links
URLs are often long and not human-readable, containing a combination of numbers, letters, and unicode characters that do not always convey well to screen readers. Whenever possible, use linked text rather than a plain URL.
Related criteria
The Web Content Accessibility Guidelines tied to this topic are as follows: