Accessible links on the Webjune 30 2020
It doesn't matter which way the developer will follow to create the links on the page but what matters is the 'accessibility'.
Though it is preferable to use semantic tag anchor as it provides a lot of features by default eg: keyboard support by default, screen readers identify them by default etc.
Assistive Technologies and links
It is important to understand how assistive technologies users are going to interact with thelinks:
1) Keyboard users - Keyboard users use
tabs to navigate from actionable tags and
enter key to take any action.
2) Screen Readers - Screen readers will read the text between the
a tag and they will prepand the 'link' before the text. Hence, you will hear - "Link Go to the blog detail page".
3) Colorblind - For colorblind colors won't matter. They will just click.
Types of Links
Following are the types of links we can have on any application (not only limited):
- Internal Link
- External Link
- Graphics Link
It is important to make sure the content of the links is clear for the accessibility. Content means the text as linkable.
Following are the things to take care :
Do not use 'link' in the content of the link
For screen readers, this would be redundant information. If you are using anchor tag or role="link", screen readers will prepand 'link' before the text always.
Use unique link text
If you have a lot of links on the page. Keep link text unique as with screen readers will have a bad experience.
Do not capitalize the link content. This will create the problem with the screen-readers. Many times the screen-readers endup reading every letter aloud.
Avoid URLs as link text
URLs are not readable properly. Hence, putting the URLs as link content the screen readers will end up reading the whole URL. Hence, do not put the URLs as the link content
The length of the links is debatable. We can make the whole sentence linkable or 1 character too. The decision is to depend upon the developer or the context for the length.
2) External link
Open in new window
Always open external links in the new window.
Provide information about external links
Always provide a visual and non-visual cue about the external links. This will help the users to take the decision they want to visit the link or not. Basically external link will navigate the user to new tab or window. Hence, it is important to give them headsup.
3) Non-HTML resources
Provide information about non-HTML resources
If the links contain the non-HTML resource such as PDF, excel, ppt, etc. Do provide a visual cue.
<a href="report.pdf">PDF Downloadable Report</a>
4) Graphic Link
Use of icons, emojies , ASCII as links
Provide the alt tags of the icons, emojies, ASCII if using in the links. Screen readers do not understand what the icons and emojies are.
If the image is a link and heading too. Combine them into one. Make them 1 link. This will help the screen reader users to avoidduplicate information.
- Try to avoid lot of links on the page
- There should be No blank or broken links
- Combine Adjacent Links into a Single Link