Hyperlinks, commonly referred to as links by all are the most basic navigation element of any web page irrespective of the nature of the web, i. e. static web of the 1990's or the more dynamic web of the current decade.

In general, users identify links as a clickable button to move to another location. This can be either another web page, a particular section on the same page or even an email link. Links are underlined by default and their color changes when the user visits the link. Thus making it easier for users to differentiate the visited links from the unvisited ones.

On the web, hyperlinks are identified by different Assistive Technologies with their name for the users. By name, we refer to the text used between the opening and closing <a> tag. But you might be wondering, what happens in the case of image links isn't it? Well image links are identified either by the alt or title attribute value depending on what is being provided by the author. In the case of both of them being present, a screen reader will read out the alt attribute by default unless specified otherwise by the user.

Another important point to remember is that Assistive Technologies, such as screen readers identify links out of the context for users. This results in users not being able to listen to the surrounding text making it very essential to name the links appropriately. Screen reader users access the links on the web pages mainly with the Tab key or in the form of a Links list.

Well this was about a brief introduction about links, how browsers render them and how Assistive Technologies users interact with them. Let's now move ahead and understand the common accessibility problems associated with web links.

Common Accessibility Issues

• Non-clear link text: The basic access issue with web links is use of non-clear text for displaying links on a web page. A common example is web pages filled with "Click here" links. We can easily read the surrounding text and identify the purpose of the link but what happens to a screen reader user who navigates with Tab key or in the form of a list?
• Identical link text: Another common accessibility issue with links is use of identical text for presenting links that lead to different web pages. "Read More" is used frequently on web pages especially for presenting News stories, Press Releases etc. Also frequently we come across links for displaying content in different formats presented using identical link text, such as "PDF", "HTML" Such links add to confusion for users since they are not sure about the link destination especially when there are multiple instances of such links on any web page.
• Missing keyboard support: Lack of keyboard support for accessing links is an issue faced more recently by screen reader users and keyboard users on dynamic web pages and web applications. A web page or application looses its purpose if a segment of users is not able to access the links. Ever tried accessing drop-down navigation menus with keyboard or try to use a date picker calendar on websites with a keyboard and understand the amount of frustration faced by keyboard users.
• Redundant image and text links: Very common phenomena on the web today is the use of images besides text to display a block of information and both of them, image as well as the text are link to an identical web page. For a web page author it is just another style of presenting information and we as users don't bother to think that far. Such links are very annoying for screen reader users as they have to listen to same link text (once as image link and other as text link).
• External and new window links: On web pages, we often come across links that lead to another website as well as links that display information in a newly open browser window. As users we rarely make note of such things but ever thought what happens to learning impaired users? They often get disoriented when suddenly they are taken to an external website as the presentation and navigation changes completely. Similarly opening new windows for displaying information disables the "Back" button of the browser adding to discomfort for users who wish to go back to the original web page.
• Use of styles to turn off underline for presenting links: Many web authors use styles to turn off underline for links generated by default saying that "it kills the look of the web page". But do they ever think, how would user locate links on web pages that are cluttered all sorts of information? Elderly users with deteriorating vision will find it impossible to identify links if the underline is turned off and they will rather prefer to leave such a web page.

Above-mentioned access issues affect users with different types of impairments as well as elderly users and looking at the number of disabled users across the world, this is making the most basic functionality of the web, i.e. navigation inaccessible for them.

Well at this point I won't go in to statistical data about number of web users who might face problems due to inaccessibility of links but rather concentrate on how we can address the above-mentioned issues and maintain the web page's presentation at the same time.

How to make web page links Accessible?

• Use clear and descriptive text for presenting links: Let's take the example stated above, "Click here" and understand how we can use more descriptive text to make it more readable and accessible. For instance, on a company's website, it is stated "To know more about our services, Click here" where "Click here" is a link. This can be presented as "Click here to know more about Our Services" where "Our Services" is a link.
• Use unique link text: Using unique link text for each link help users differentiate one link from another and avoid confusion. Instead of saying "Read More", one can say "Read more on President's address to the nation". It is not necessary to repeat the entire news item text, just two to three words followed by ellipsis can easily serve the purpose and maintain the web page's presentation at the same time. In the case of links to alternate file formats, link text can be made more meaningful by repeating the file name or the text besides, such as "Annual Report 2009" within the link text and hide the same using CSS.
• Use device independent event handlers: A user must be able to access web page links with the keyboard as well as a mouse. To achieve this, use onclick as well as onfocus event handlers and make the links device independent.
• Present image and text links together: To avoid repetitive listening for screen reader users, provide image and text links presented besides each other using a single a tag instead of using two separate tags. Even if one wants to present the text as a heading or a list the same method of presenting in the single tag must be used. This will ensure that both the image and text are clickable and provide empty alternate text for the image to avoid repetition.
• Identify external and new window links in advance: To achieve this, use icons to identify external links and new window links and place them besides the link. In addition, provide alternate text to the icon as "External website" and "Opens in a new window" respectively. Supplement the same information using the title attribute to ensure that all browsers display the same. This will ensure that users with learning and visual impairments will be aware about the change and interact with the content accordingly. Some people might argue that links should not open in a new window in the first place, I will prefer discussing this issue separately may be in a future article.
• Don't turn off underline for links: The most effective solution for handling presentation of links is CSS but avoid use of styles for turning off underline for links as it may confuse any user leave alone users with impairments. If anything use styles to help users identify links more easily rather then making it difficult for users to locate links.

Having discussed the issues and possible solutions for addressing the inaccessibility of web links, let's understand the different success criteria's of WCAG 2.0 that it applies to.

Applies to WCAG 2.0:

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose...

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element...

2.1.1 Keyboard: All functionality of the content is operable through a keyboard interface...

2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text...

3.2.2. On Input: Changing the setting of any user interface component does not automatically cause a change of context...

4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined...

2.1.3 Keyboard (No Exception): All functionality of the content is operable through a keyboard interface...

2.4.9 Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone...