Five Minute Accessibility: Links and Hypertext
It seems that a lot of frontend developers either don’t know about coding for accessibility or they don’t care. Of course, it can be hard to implement in organizations with no focus on accessibility. But it’s always a developer’s (and designer’s) responsibility to develop an inclusive web.
In the series Five Minute Accessibility I will introduce one simple thing you can do to improve accessibility in your projects. In this post you’ll learn about links and hypertext.
Links and Hypertext
Hypertext is a core part of HTML and imagining a web without it is hard. Thankfully this means that hypertext out of the box is accessible to all devices and assistive technologies. However, there are a lot of cases where links aren’t made accessible and this is such an easy thing to change. Let’s go!
First of all most assistive technologies uses the tab key as navigation and this is the case with links as well. For clicking a link the enter key is used. This means that if you have a link which is not accessible by the tab key and which can be triggered by pressing enter your site is not accessible.
“But why would a link be accessible by mouse click only?” you might ask. Well, ask yourself: “What part of the web has the most bad habits?” Okay, it’s PHP you’re right. But Javascript is a very close second. By creating bad event handlers you’re developing a non-inclusive web.
Examples
So, this is a very bad link since it goes nowhere. This approach is often used to things like expanding a drop down menu. Users with non-assistive technologies see the result of this but users with assistive technologies will only see a link that goes nowhere. Please stop doing this. Links must have a non-empty href attribute in order to be considered true links and to be accessible to keyboard users.
This link is properly the most common example of non-accessible links. Considering the way screen readers works links should always make sense out of context. “Click here”, “more” etc. does not make sense out of context.
Always keep the important information at the beginning of the link. Stating extra information first is a bad habit. Instead write “Products (Opens in a new window)”.
You can follow me on Twitter.
