In hyperlinks & accessibility we have learnt how to code for different kinds of links. For the link to be recognized by the user, the link text is provided. Providing an appropriate link text that describes the purpose of the link is very important when accessibility is the high priority. In this article we will understand how to write an appropriate link text that describes the purpose.
WCAG 2.0 SC 2.4.4 link purpose (in context) and SC 2.4.9 Link purpose (only) (future link) mandates that an appropriate link description should be provided for each link to understand the target, purpose or the action associated with them.
Methods of providing link text
Below are different ways of providing the link text, the ways of making them available for every user. Note that the term link is not necessary to provide as part of the link description as the assistive technologies have the capability to identify the role of anchor.
Associating link text with surrounding content
The purpose of each link should be determined by the link text alone without depending on the surrounding content. Screen reader users have the option to pull the list of links on a web page. When users pull the links list they could just observe the link text but will miss the content around it. Similarly users who skim the content with tab key will navigate only through the links and they will not read the content surrounded by the link. In these situations links having only the text such as Click here, more, read more does not make sense to the user. However in certain cases it is difficult to provide the context out of the link which may otherwise lead to redundancy. For example, Links to description of a product with a heading as follows.
<h3>LG televisions</h3>
<a href=â€types.htmlâ€>Types</a>
<a href=â€features.htmlâ€>Features</a>
<a href=â€cost.htmlâ€>Cost</a>
<a href=â€compare.htmlâ€>Compare with other venders</a>
If the same links should make the description within the context it will be as follows.
<h3>LG televisions</h3>
<a href=â€types.htmlâ€>Types of LG televisions</a>
<a href=â€features.htmlâ€>Features of LG televisions</a>
<a href=â€cost.htmlâ€>Cost of LG televisions</a>
<a href=â€compare.htmlâ€>Compare with other venders</a>
When the vender name is added, the user should read them with each link. Similarly in a data table if each column cell has a link, it can associate with its header to get the context without adding the additional text with each link. In certain cases a paragraph of content is provided and at the end a read more link is added to navigate for more description of the content. Mechanisms such as ARIA-labelledby, CSS hiding helps to define the context in such scenarios.
Same link text targeting to different destinations
Ensure that the link descriptions readily distinguish the target. If a page has Contact link twice, both of them should navigate to same page. In other words links that target to different locations should have different link text. In pages where news articles, blog posts are provided, after a short description a read more link is provided for complete news article. Web page may contain many such read more links. Each of this read more link target to different news article. When pulled out of link list screen reader user observes many read more links and. Unless the user know which read more takes to which destination they end up reaching a wrong destination.
In these kind of situations read more links should be provided with additional text such as ‘read more about the sales of 2014’. Once you have these kind of links, every read more link will have ‘Read more about something’ as many times as the article of the page. Screen reader users pull the link list and navigate them by typing the first letter of the link text. In this situation user should go through each read more link to find the required link. Removing the term read more from the link will in fact does not change the meaning of the sentence. For example ‘Read more about sales for the year 2014’ and ‘Sales for the year 2014’ do not make much difference. Similarly the terms ‘Click here’, ‘More’, ‘Continue reading’ etc can be avoided as part of link text.
Providing differentiating text at the beginning of the link
Screen reader users navigate the links with keyboard and links list option. In both cases they prefer reading first few words of the link to understand the context. Taking the above example of sales, if the web page contains sales of 10 years, try providing the links such as 2014 sales, 2013 sales, 2012 sales, 2011 sales instead of sales for the year 2014, sales for the year 2013, sales for the year 2012 etc. By providing the differentiating link text at the beginning of the link users can read first few words and decide to click the link or not.
URLs as link text
There is no harm in using URL as the link text, however if the link text is lengthy it is better to substitute them with appropriate link description. For example, reading a simple URL such as www.maxability.co.in is easy where as reading the URL such as http://www.maxability.co.in/2014/05/writing-appropriate-alternate-text-images/ is difficult. Substituting the same URL with Writing appropriate Alternate text for images will be easy to understand for any user.
Long link text
There is no word limit for link text. Provide a meaningful link text that describes the purpose of the link. Make it as short as possible without compromising on the meaning. Very lengthy link text will be embarrassing to the screen reader users and thus navigate away from the link without reading the entire link text.
Short link text
A link can be as short as a single character. For links such as alphabetical listings, indexing the search results can have single character links. However users with difficulty pointing on small area of the page (10 px * 10 px) will face significant problem clicking such links. Instead provide CSS padding techniques to increase the clickable area around the character. When these links are arranged horizontally possibility of clicking the adjacent link is relatively high and land in a wrong destination. To avoid these situations provide a vertical bar or any other similar non clickable elements dividing each link. Ensure that at least a single character is provided as part of link text. Avoid using non text links.
Alternate text for link description
For certain links of the page an image is provided. Links such as products, services just show an image and an anchor is provided for the user to navigate to that page. In such cases the alternate text should provide the target of the link. Also images are provided to actionable functions of the page such as cancel; continue etc with an anchor tag. Provide the action associated with the image in the alt attribute.
Additional text for links open in new window, external website and non-HTML pages
Provide additional text description for the users to alert that the link opens in a new browser window or targets to external website or opens a non-HTML page. Ensure that the additional text is after the link description not at the beginning. For example FaceBook (external website). Similar to the read more example, if the page contains more links that target to external website screen reader user has to listen external website at the beginning of the link each time they encounter it or will be difficult navigating when the links are arranged in alphabetical order in the link list option of the screen reader.
Title attribute as substitute of link text
A title attribute can be used with anchor tag to provide additional information of the purpose of the link. However the alerts and warnings that user needs to know before opening the link should not be provided in the title attribute. Since the support for title attribute by assistive technologies and user agents differ, it is not recommended to use title attribute for important alerts and information.
Techniques for providing descriptive link text
- G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence (General technique)
- G91: Providing link text that describes the purpose of a link (General technique)
- G201: Giving users advanced warning when opening a new window (General technique)
- H30: Providing link text that describes the purpose of a link for anchor elements (HTML technique)
- H33: Supplementing link text with the title attribute (HTML technique)
- H77: Identifying the purpose of a link using link text combined with its enclosing list item (HTML technique)
- H78: Identifying the purpose of a link using link text combined with its enclosing paragraph (HTML technique)
- 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 (HTML technique)
- H80: Identifying the purpose of a link using link text combined with the preceding heading element (HTML technique)
- 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 (HTML technique)
- H83: Using the target attribute to open a new window on user request and indicating this in link text(HTML technique)
- C7: Using CSS to hide a portion of the link text (CSS technique)
- ARIA7: Using aria-labelledby for link purpose(ARIA technique)
- ARIA8: Using aria-label for link purpose (ARIA technique)