A hyperlink is a HTML element that connects one webpage to another, one website to another or allows the user to jump from one portion of the page to another portion of the page. An accessible hyperlink informs the user where it is targeting, takes the user to the accurate page without a broken link.
Content authors should know the reference of the anchor to define the link description. A simple hyper link consist of
- <a>
- tag that provide the hyperlink element on the webpage.
- href attribute
- That defines the target of the hyperlink.
- Link description
- Text that defines the target of the hyperlink.
- Target attribute
- That allows the hyperlink to open in a new tab or new browser window.
- Title attribute
- That shows a tool tip with additional information of the target.
Types of links
Let us understand the types of links that are commonly seen on a webpage and how to code them for accessibility.
- Bookmark links
- Links targeting to other pages of same website
- Links targeting to another website
- Links opening in a new tab or new browser window
- Links targeting to non-HTML pages
- Links associated with images or icons
- Links target nowhere
Bookmark links
A bookmark link announced by screen readers as a inpage link or a internal link or a same page link is used on a lengthy webpage in order to allow the keyboard only and screen reader users to navigate directly to various sections of the page. For example hitting enter key on the above links (i.e. Bookmark links, Links targeting to other pages of same website, Links targeting to another website, Links opening in a new tab or new browser window, Links targeting to non-HTML pages, Links associated with images or icons, Links target nowhere) target to that specific section of the page below.
Users who have limited hand movements or those who cannot scroll the mouse can also benefit with these links. These kind of hyperlinks can be useful for allowing the users to skip the repeated navigation portion of every webpage on a website using a skip navigation or skip to main content link. For other bypassing mechanisms read 2.4.1 bypass blocks.
How to do this
Provide an id to the target of the page where the focus needs to be shifted. In the hyperlink href attribute call this id as shown in the code example.
Code example
<a href=â€#maincontentâ€>Skip to main content</a>
<div id=â€maincontentâ€>this is the target of the bookmark link </div>
Links targeting to other pages of same website
Any website consists of set of web pages. The number of WebPages in a website may differ from one website to another. A simple website may have a single page where as a complex website may have thousands of pages. No matter how big the website is each page should be linked to other pages directly or with minimum clicks. One HTML page is linked to another with the href attribute by calling the page in it. It is recommended not to use target attribute forcing the user to open the link in a new browser window or new tab when it is navigating to same website but to a different page. Take care that the link text describes the target clearly to the user without the ambiguous descriptions. Ensure that the href points the accurate location where the file is including the folders and subfolders it may contain.
How to do this
Provide an anchor tag <a> with the href attribute pointing to the source of the file the browser has to open. Provide a clear description of the target of the link.
Code example
<a href=â€contact_us.htmlâ€>Contact Us</a>
Links targeting to other websites
Links targeting to other websites looks similar to the links that target to other pages of the same website. Instead of calling a html page in the href, content authors should call a url. These type of links navigate away from the current website to a different one. People with cognitive disabilities may expect similar layout unless an alert is provided for them that the link targets to a different website. In many cases content authors forcefully let the users open the links that target to new website in a new browser window using the target attribute. Since user has the option to open the link in new browser window or new tab with right click or application key using the target attribute is not an ideal way. Ensure that the target url is provided accurately in the href attribute.
How to do this
Provide a hyperlink <a>, use the URL in the href that target to the different website.
Code Example
<a href=http://www.facebook.com>Facebook</a>
Links opens in new tab or new window
In certain cases the content authors let the link open in a new browser window or a new tab. Using the target attribute in the anchor tag content authors can forcefully let the link open in a new browser window. This mechanism confuses keyboard only users and users with cognitive disabilities as the back button of the browser does not function. Providing an alert either with the link description or with an icon helps the users to get the information prior to opening the link leaving users with less ambiguity.
How to do this
Coding this kind of links is as similar as coding any other link but using a target attribute is an addition.
Code Example
<a href=http://www.twitter.com target=â€_blankâ€>Twitter – Opens in a new window</a>
Links open in non-HTML pages
Another kind of links that are commonly observed on websites is links that open as PDF, MP3, MS word etc. The link description should clearly indicate to the user that the link opens in a format other than a web page. Providing an alert with link text or with an icon with alternate text such as PDF, MP3, MS Word helps the users in understanding the format in which the link will open.
How to do this
Provide additional link text such as ‘PDF’, ‘MP3’ or an icon with appropriate alternate text helps the users to identify the format before they use the file.
Code Example
<a href=http://www.maxability.co.in/statastics.pdf>Statastics <img src=â€â€¦â€ alt=â€pdfâ€></a>
Links associated with images or icons
Links with images are quite commonly observed across the websites. An image is wrapped within a hyperlink to target to another web page or website. Provide alternate text to the image that describes the target of the link. If an image and the adjacent link have same description and serve the same purpose either provide empty alternate text or wrap the image into the link and provide either alternate text for image or description to the link. Providing both of them adds redundancy.
How to do this
Provide an anchor tag, include an image tag in it and provide alternate text to image. Do not provide link description. Or provide anchor tag provide an image in it and provide alt=â€â€ and give a clear link description.
Code example
<a href=â€products.htmlâ€><img src=â€images\products.jpeg†alt=â€products†/></a>
Links target nowhere
Completely avoid using links without href or href=â€#â€. These are links used to just show some elements as links or just to achieve other functionalities of the page but do not target anywhere. This confuses every user in distinguishing the actual links from links that target to some other location.
Points to Remember
Keep the following points in mind to have an accessible hyperlink.
Proper link description
Every hyperlink should have a clear, descriptive and unambiguous link description. Writing an appropriate link description (future link) tells how to provide a clear description.
Keyboard accessibility
Every hyperlink should be navigable and activated using a keyboard alone. Use independent event handlers to ensure that every functionality provided by hyperlinks (opening popup, closing popup, providing an action etc) are triggered using a keyboard. As per WCAG 2.0, SC 2.1.1 Keyboard only every focusable element should be navigated using a keyboard including hyperlinks.
Keyboard focus visibility
People with attention limitations and short term memory limitation easily distract from what they do. A low vision user may lose track of the navigation path. For these kind of users a visible keyboard focus carat helps in identifying the current focus. Effects that are provided on mouse hover should be also provided for those don’t use mouse. 2.4.7 focus visible helps you understand how to provide an accessible focus visibility for hyperlinks.
Identifying links from surrounding content
As per WCAG 2.0 SC 1.4.3 Contrast minimum, links and the surrounding content should have a contrast ratio of at least 3: 1. As per WCAG 2.0, SC 1.4.1 Use of color, An additional way of differentiating links from surrounding content with non color designators such as underline, changing the back-ground color etc should be provided. Screen reader users set the speaking speed at a higher level than the normal. Due to this some screen readers read a group of links as a single sentence though they are in separate anchor tags. Providing some separators such as vertical bar helps screen reader users to separate them from each other. In other ways providing them in a HTML list also allows screen readers to read them separately.
Using title attribute for anchor tags
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 need 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 hyperlinks
- G1: Adding a link at the top of each page that goes directly to the main content area(General technique)
- G123: Adding a link at the beginning of a block of repeated content to go to the end of the block (General technique)
- G124: Adding links at the top of the page to each area of the content (General technique)
- G125: Providing links to navigate to related Web pages (General technique)
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information (General technique)
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them(General technique)
- G200: Opening new windows and tabs from a link only when necessary (General technique)
- G202: Ensuring keyboard control for all functionality (general technique)
- H33: Supplementing link text with the title attribute (HTML technique)
- C7: Using CSS to hide a portion of the link text (CSS technique)
- SCR24: Using progressive enhancement to open new windows on user request (scripting technique)
- SCR31: Using script to change the background color or border of the element with focus (Scripting technique)
- SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons (Scripting technique)