While the content of a web page remains the same, different users access it differently. The content should therefore be displayed and organized in such a way that there is not a lot of difference in how different users consume it.
I have been learning about web accessibility and here are some of the ways you can make your links more accessible.
1. Make them Focusable
By default, HTML links are focusable. This is especially useful for people who only use a keyboard to interact with a web page. It is important to know which item is currently in focus. The default focus style for Chrome is a faint blue border while for Mozilla is a dashed border. Developers have the liberty of changing these colors provided they are easily noticeable.
2. Add non-color indicators
Typically, we use a different color to define a link. However, when we consider colorblind users, this might not be the best distinguishing method to use. Instead, other indicators like underlined links can be used. Non-color indicators mostly apply to links surrounded by blocks of text. Links in menus are more obvious due to their positioning and layout.
3. Use Relevant Link Texts
Consider this statement:
Click here to get 10% OFF.
A screen reader user who doesn't want to read all the contents of your page and instead retrieves all the links will only have a link with the text 'here'. That doesn't mean anything. It is important to provide proper link texts so as to preserve the meaning of those links when they are taken out of context The above statement could be rewritten as:
Click here is unnecessary. According to WebAIM, some other link phrases to avoid are:
- here
- more
- read more
- link to [some link destination]
- info
4. Use Optimal Link Sizes
While it is hard to determine the best link sizes, links especially those presented within their own block should not be too small or too large. Small links may make it difficult for users with motor skills disabilities to activate them while very large links may be activated by mistake.
5. Group adjacent links into one single link
Ever come across those images that are links with a title and a read more text that are also links? This is unnecessary if these links lead to the same destination. Instead, wrap the image and the text with one anchor tag to create a single large clickable area.
These 5 tips are just an overview of how you can make links more accessible.
Learn more at WebAIM's Links and Hypertext page
I hope you learned something new today. Feel free to add more tips down in the comments.
Happy Coding :)