How to resolve duplicate link text issue in a web page? How to make ‘read more’ links accessible friendly ? How to make screen readers recognise hidden information associated with a link? Web accessibility standards necessitates all links to have enough information to help users decide whether they want to follow a certain link. However, there may be certain situations where some of the links on a web page have same text or icon links. some of the examples of this could be a page contains several links with ‘view details’ or ‘read more’ or ‘continue reading’, ‘download’ text content in it.
This article details some tips to make duplicate text links into accessibility standards conforming links.
Challenges with duplicate text links
- A detailed link context cannot be shown due to visual appearance guidelines.
- Lack of sufficient space besides the link.
- The link context is visually well understood by link context and hence no additional context may not be required for most of the users.
- Screen readers while listing all links on the page, eg: while using JAWS screen reader, using INSERT+F7 will list all the links on the current page, providing users ability to view and activate all links quickly using a tool provided menu. In such contexts, if there are many links with same text, it will be impossible for users to determine which link to activate.
Following technics can be applied to achieve accessibility compliance for repetitive text links on a page.
- Provide a title attribute with additional information:
This is considered to be very simple but most powerful way of describing a link text or link icon. Since the title attributes are visible upon mouse over, it will have no visual impact until the mouse over event is triggered. - Provide additional visual tool tip:
Providing a tooltip with link context text will also enable users to identify the link context. - For assistive technology and screen reading softwares:
While providing a title attribute or tooltip will be sufficient in most of the cases, it may not be always possible to provide a detailed additional text. eg: if there are certain additional instructions for screen readers on how to operate the link when the keyboard interaction is different from normal activation of a link. In such context, use ‘aria-label’, ‘aria-labelledby’, ‘aria-describedby’ attributes to provide additional information on the link context to the users. - Using CSS to hide additional information:
A part of the detailed information can be visually hidden using CSS. However, it should be noted that usingdisplay:nonewill prevent screen readers from accessing the information. To overcome this challenge usevisibility:hidden;orposition:abolute;and position the visually hidden text from the visible screen. If using bootstrap css framework, consider usingsr-onlyutility class. - Combine icon and text within same link:
If there’s an icon along with the link text, both icon and text could be wrapped inside single anchor tag. This avoids confusion to the users.
Understanding Success criteria
Link purpose context is a level A compliance requirement. The success criterion for this requirement necessitates that the users should be able to understand the purpose of the link.
- 2.4.4 Link purpose (in context) – Level A
- 2.4.9 Link purpose (link only) – Level AAA