On the Accessibility of Links

  • 0
  •  0

Written by: Timothy Stephen Springer

There are many in the usability community who regard accessibility as part of usability. I believe this to be a misunderstanding of accessibility. At its root, accessibility is aimed at removing barriers to the access of information and resources. When speaking to clients, I give them brick & mortar examples, such as dips in curbs, doors which open automatically, and elevators. Accessible web design, first and foremost, is removing technical issues which serve to act as a barrier to the information and resources contained within the site. For instance, a login system which uses an image-only CAPTCHA to verify the user is human is an outright barrier to access. Image-only CAPTCHA locks blind users out of a website in the same way only having stairs locks out wheelchair users from the second floor of a building. What makes accessibility and usability not the same is exactly this technical nature of the problems with access. While many of the solutions to accessibility issues can lead to a more usable system overall, when the aim is making something more accessible, the solution almost always has a technical basis without which the system may completely lock out disabled users.

Then there is what a former colleague and I came to call “Usability for Persons with Disabilities”. These are the types of things which are specifically aimed at making the user experience better for users with disabilities. One of these crossover items of “Usability for Persons with Disabilities” – and one I regard as very important – is the accessibility of link text. One of the most enlightening observations I’ve made during my career as an accessibility consultant is that disabled users also scan pages the same way “normal” users do. This is a very significant concern to keep in mind, because how you structure a page can make a big difference in whether or not the page is easy or difficult to use. Nowhere is this more clearly demonstrated than when it comes to links. The following are some best practice guidelines for creating accessible link text.

Linked text should be predictable.

Don’t create witty links for common destinations. “Home” is the home page, “Contact” is the contact page, and so on. One of the ways that blind users may “scan” the page is by bringing up a list of all links on the page via shortcut key combination. They may also sort the new link list alphabetically, to look for these commonly linked terms. Creating linked text of “Get in touch with us” instead of “Contact” will increase the time and frustration in looking for these links.

Linked text should make sense when read out of context.

Related to the above, the links you create must make sense when they are read out of context – because they will be. One of the most common violations of this best practice is link text such as “Click” or “Here”. When displayed in the generated link list, these links will make no sense. Link text should be able to stand out on its own and clearly indicate the information to be found or action to be performed at the destination.

Linked text should be unique.

All links which go to different places should be given link text which is different as well. The most common violations of this best practice are links which say “Read more”, like those found on many sites’ News pages, where there is a series of story introductions with a link of “Read More” pointing to the full news story next to each introduction. Another example I recently discovered was a system admin screen which contained icons to preview system entries laid out in a table format. Each icon had identical alternate text of “View”. While sighted users could easily tell which item would be viewed when clicking that icon, users of screen readers would experience a list of links all labeled “View”. During real use by a user of JAWS, it took a fair amount of reading adjacent text to figure out which “View” link corresponded to which record.

Linked text should be terse.

While it is important to strive for clarity in linked text, it is equally important that the linked text be as short as reasonable. Excessively long link text can result in the link getting ignored when the user scans the link list. There may be rare times when longer links are needed for clarity. A good strategy to enhance accessibility of such long links is to ensure the important words are at the beginning of the linked text.

Links which trigger client side scripting should clearly indicate what action will happen when the link is activated.

In today’s Web 2.0 world of Ajax and DOM Scripting, it is common for links to trigger client side scripting to activate some interactive feature. It is important to ensure that the linked text reflects this. Fortunately, it is possible to reveal this information to users through the use of the title attribute. One caveat, however: the content within the title attribute may not be noticed by users of assistive technology, depending upon their system’s settings.

Apply these same practices for linked images.

Everything discussed above applies for linked images as well. One of the upsides for linked images is that when creating alternate text for linked images, you’re able to add information to enhance understanding of the destination or action. Recently I worked with a client which had a content management system that listed the current pages in a table format. Each row contained the ID number, page title, date created and icons representing “View”, “Edit”, and “Delete”. These icons had alternate text which were prefaced with the action word and then finished with the page title. For example, the record for the homepage had the following alt text for the icons, as in: “View: Homepage “, “Edit: Homepage “, “Delete: Homepage”. By using this approach, they enable users of assistive technology to easily understand the action to be performed by activating each link and exactly which record they will be acting on.

Make sure alt attributes for image links is not identical to adjacent link text.

Something I frequently see are icons with regular text links next to them. During the review for a past client’s site, I noticed they had an icon next to each item in their primary navigation. Each icon had alternate text identical to the text next to it. When users of screen readers encounter this menu, they hear “Home home”, “Products Products”, “Service Service”, etc. A better approach would be to make the image and the text all part of the same link and give the image a “null alt” value (alt=””).

In the grand scheme, there are numerous other accessibility-related things that should concern you before the quality of linked text, but this is one area where usability for those with disabilities can definitely be enhanced with little overall effort.

No Comments

    Leave A Comment