Links typically connects two web pages or attach non web pages on a page. In some cases the links jump from one portion of the page to some other portion of the page. Links even connects the current website to a different website.
In any case all that the developers need to remember is
- The text description of the target of links must be clear.
- Links that target to external websites or non-web pages or links that open in a new window need to be called out.
- Links are not broken.
- The role of links are marked-up properly.
- Links that are surrounded with normal text is clearly distinguished.
The text description of the target of links must be clear.
The text provided between <a> and </a> is the link text. This is what any user can see to understand the action associated or the target. Even the screen readers read the same text to its users.
Avoiding link text such as ‘click here’, ‘read more’, ‘continue reading’. These link text is meaningless if the surrounding text is not substituted. These link text is not sufficient when the user pulls out the list of links on a web page. Screen readers have the feature to bring the list of links and users are familiarized using it for quick navigation.
Bad example
One of the tourist attractions in the bay area is the Golden Gate Bridge. The travel on the ferry gives more joy to the trip. <a href=‘’ >Continue reading </a>
People all over the globe reach to San Francisco International airport to start their Bay area trip. SFO airport is one of the busy airports <a href=‘’>continue reading</a>
When the user pulls the links list with the above examples, screen reader shows ‘continue reading’ twice, user will not have any clue about the target of them.
Good Example
Markup way
One of the tourist attractions in the bay area is the Golden Gate Bridge. The travel on the ferry gives more joy to the trip. <a href=‘’ >Continue reading about Golden gate bridge</a>
People all over the globe reach to San Francisco International airport to start their Bay area trip. SFO airport is one of the busy airports <a href=‘’>continue reading about SFO airport</a>
ARIA way
One of the tourist attractions in the bay area is the Golden Gate Bridge. The travel on the ferri gives more joy to the trip. <a href=‘’ aria-label=‘Continue reading about the golden gate bridge’>Continue reading </a>
People all over the globe reach to San Francisco International airport to start their Bay area trip. SFO airport is one of the busy airports <a href=‘’ aria-label=‘Continue reading about sfO airport’>continue reading</a>
Screen readers announce the content from aria-label while sighted users grab information from the link text. If sufficient additional context is available elsewhere on the page aria-labelledby can also be used in place of aria-label. Read more about aria-labelledby.
Links that target to external websites or non-web pages or links that open in new window need to be called out.
In many websites we observe links that have PDF documents, Word files presentations or any other non-web pages. It is a good practice to call out the format of the target along with the link text. Eg: World disability senses (PDF 20 MB). One other method of including the information is with an icon associated with the link, in such cases developers can simply provide alternate text for such images as explained below.
<a href‘’>World Disability sensus<img src=‘pdf_icon.png’ alt=‘PDF 20 MB’ /></a>
As discussed in the ARIA way, even aria-label can be used in these cases too. Overwrite the link text with aria-label for the screen reader users but remember accessibility is not just for screen reader users.
The same principal applies even to the links that target to a different website or those open in a new browser window.
Links are not broken
This is not purely an accessibility requirement but ensuring no links on the page are broken or do not target to ‘404 page not found’ increase the user experience for everyone.
Remember the following.
- Every <a> have a ‘href’ attribute specified. If not the link cannot be navigated with the tab key of the keyboard.
- The href attribute have a valid value. The value will be an URL or any file in the same directory (different page of the same website), document or some identifier in the same page.
The role of links are marked-up properly.
Using <a> is sufficient to get right role for links. Nothing else is required from the developer. By using <a> screen readers read the element as link. The challenge is when a javascript onClick function is used for a <div or any other non-focusable element. Since <div is a non semantic element, screen reader identify it as a link. Developers need to substitute with ARIA role link to the <div>.
Example: <div role=‘link’ onClick=‘
Some_function’>Our projects</div>
In the example above the href value is not provided and also this is just a <div> and so the user cannot navigate the element with the tab key of the keyboard. Using the tabindex attribute i.e. tabindex=‘0’ can give focus to this element as shown below.
Example: <div role=‘link’ tabindex=‘0’ onClick=‘
Some_function’>Our projects</div>
Inpage links
With any screen reader anchor elements are announced as link. When a link is targeting to a different portion of the same page i.e. by using ‘#id’ in the href value, the role is read out with a different term. Some links announce them as inpage link, some as same page link and some as internal link. The intention is the same what so ever the term is.