Links List: The Importance of Clean Link Coding


  • May 9, 2018
  • /   Adot Labs
  • /   learningcenter
Picture of the adot labs page links list.

What is a Links List?  

A links list is an object that contains a list of hyperlinks to all the pages on the website and any external web pages. It appears to visually impaired users so they can easily navigate a website and is one of the most important parts of website accessibility. In most instances, creating accessible links is a generally easy task. However, there are more steps to make accessible links than just changing the text from “click here”.  

How to make links accessible?  

Web users must be able to access each link without a keyboard. In most browsers, the tab key lets users move from link to link and the enter button allows people to select a specific link. Screen readers usually inform users that text or graphics is a link. A majority of screen readers will read “link” when a link is selected. Because screen readers will identify links to the user, it is not necessary to put “link” in the link text. The alternative text for a graphic does not need to say “link” or screen reader users will be read “link graphic link to _____” which is redundant and confusing for most users.  

A common accessibility issue is links that go nowhere. Developers will create dynamic menus that drop down when the users hover over links with a mouse. Mouse users will be able to use this functionality, but users that only use keyboards or other assistive technologies will not be able to access this, and it will take them nowhere. Drop-down menus should generally be avoided, and regular hypertext links should be used in their place or to create a destination for the links that will compile the links in the drop-down menu.  

 Screen reader users usually skip from link to link and do not read any text that is in-between the links. Therefore, all the links on the website should have clear context by themselves. On the one hand, Instead of “click here” the link should read “links list article.” On the other hand, link text should not be so descriptive that it’s an entire sentence such as “links list article describing how to make links accessible and how to code properly, so it’s accessible to all users.”  

If the link links to an external page, the link should tell the users. Screen reader users have a difficult time navigating between tabs, so it is best to let them know that they will be taken to a different page. For links like this, the link text should read “Links List Article (opens in a different window).” The link text explaining the purpose of the page and what it is should come first, and then the descriptive information about linking to a different page should come second.  

Always make sure to include link text, so the URL isn’t read out. If the link text isn’t provided for a web page, then the URL for that web page will be read out. This will be frustrating for users that use assistive technologies, especially for pages that don’t have optimized URL’s because some URL’s can be very long, such as fakewebsite.com/education/articles/march/123780753468852147974. The whole URL will be read out to the user that uses assistive technologies because they are hoping some context of what the web page is will eventually read out to them, and they will be severely disappointed. To fix this, make sure you also include link text for all links on the website so instead “adotlabs.com/articles/linkslist” is read out to the user.  

When images are used as links, the alternative text for the image is also used as the link text. Therefore, the alternative text should include a description of the image as well as the function of the link. Sometimes, the description of the image and the function of the link are the same (alt= accessibility statement). Other times, they are different and will require more effort (alt= man using a screen reader with an accessibility link).  

Limit the number of links on a page. As stated before, assistive technology users use a links list to navigate a site. If there is a lot of links on all of the pages on the site, users will have a difficult time locating the link they wish to navigate to.  

 Clean link coding is a vital and necessary part of web accessibility. Incorporating the tips in this article will ensure that your links are accessible for all. As Oliver Sacks said, “I wish for a world that views disability, mental or physical, not as a hindrance but as unique attributes that can be seen as powerful assets if given the right opportunities.” Making your links accessible for all gives users with disabilities the opportunity to have a more inclusive internet which benefits everyone.  


 Sources:

https://www.sitepoint.com/15-rules-making-accessible-links/ 

https://webaim.org/techniques/hypertext/ 

Your items have been added to the shopping cart. The shopping cart modal has opened and here you can review items in your cart before going to checkout