Tag Archives: accessibility

Good HTML etiquette – the accessible link

Still with me for Part Three? Huzzah. Hopefully, you have all had a little bit of a practice with everything we’ve talked about so far.

Part One – why HTML?
Part Two – the building blocks of HTML

With the basics hopefully making sense, it’s time to get a little bit more sophisticated. But not too sophisticated, so don’t worry. Some of what I am going to talk about relates to accessibility, some of it is because that is just the way computers work and it would take far too long to explain. Just accept that this is the way it should be done!

Firstly, accessibility and why you should worry about it:
Accessibility is about making your website (and content) accessible to all users, regardless of ability, and regardless of what browsing technology they’re using. You need to keep in mind that not everyone views the Web in the same way that you do. They might have a desktop with a huge screen, or an old one with a tiny monitor, a laptop, an iPad, a mobile device, a TV… They might be blind or partially sighted, or their mouse might be broken, or they are stuck on a dial-up (or dodgy mobile) signal that is sloooooooooooooooooow to load. They might even be a screen-reader, or a text-only browser such as Lynx.

By making your website accessible you are opening it up to a much wider potential audience. Making something accessible for humans also has the side effect of making it more accessible for search engines (SEO). Which is just good sense.

The first thing you can do to improve the accessibility of your content is making accessible links.

An “accessible link” is simply a link that imparts as much information to as many users as possible. It enables the reader to preview the link, making an informed decision about whether to follow it or not, and helps to differentiate between links that may share link text but refer to different targets.

A quick reminder what a link looks like:
<a href=”URL” title=”DESCRIPTION”>link text</a>

The “accessible” bit is the title=”” part, and is called the title attribute.

This title attribute enables the reader to preview the link. This in turn allows users to more accurately guess where the link will take them, and make a more informed decision about whether or not they should follow it. Roll your mouse over this example link and you will see what I mean. The text that appears by your mouse cursor is the preview.
Example link

To code it, I typed <a href="http://www.google.com" title="this is a link to Google">Example link</a>

The title attribute can be any text you want, though to make it as accessible as possible, follow these simple rules:

  1. It should say something about the destination of the link.
  2. It needs to be between 3 and 80 characters long. A single sentence is normally sufficient.

If you are using the handy code buttons in the WordPress editor, the title attribute is controlled by the Title box in the pop-up. Another note on the link editor in WordPress – be very cautious about ticking the “open in a new window” box… It is bad web etiquette. Like in Jurassic Park, just because you can clone a T-Rex, it doesn’t mean you should. To be serious, you are taking control of the browsing experience away from the user and that is frowned upon in polite circles.

Next time, it will be accessible images… Exciting!

1 Comment

Filed under Advice