An Intro to Accessible Links

I confess. I reached a point in my learning accessibility journey that I became overwhelmed by how much there is to learn. My intention was to start a few posts about links, but there is just so much about accessible links, I didn’t even know where to start. I became discouraged.

Here I am again though, and I’m back on it! I’ve decided that I can’t tell you everything there is to know about accessible links in one post. I can, however, at least introduce the concept and offer resources to wonderful people that have written great things already.

In this post, I’m going to focus on why accessible links matter, how to know if our links are accessible and what we can do right now in our text-editors. Text-editor changes are what’s helping me ease into the concept of accessible links – hopefully it will be helpful to you as well.

Those wonderful people and resources will be sprinkled throughout for those eager to dive into making the most accessible links ever!

Why do accessible links matter?

We use links to navigate to other parts of a site, to point users to other sites, as well as refer to content that might enhance our own content. Links are how we get around the web. By default, an anchor link is accessible via keyboard and screenreader – as in these links can be literally accessed by a keyboard/device that behaves similarly, and a screen-reader.

Simply using a link or button for the control will allow keyboard accessibility.

~ WebAim’s Keyboard Accessibility Page

However, that doesn’t mean that a link is “accessible” in a way that makes sense to the user. This is what we, as developers, editors, bloggers and so on, should be paying attention to.

An example of what I mean is maybe a lot of your links say things like, “Read more” or “Click here.” The problem with writing links like this is there are screen-readers that will just pull all the links for the user to sift through. Therefore the screen-reader will read all the links to the user without any context.

So imagine having five “read more” links on a page, and just having a someone tell you “read more” five times. Your first question would be, read more… what? What am I reading more of? Similar to alt text on images, this is why links should be written to make sense on their own versus something that accompanies the content surrounding it.

How do we know when a link is accessible?

If just being physically accessible is not enough, and we must take styles or context into consideration, how do we know when a link is accessible?

Some red flags of a link in need of code changes are:

• You can’t visually see yourself tabbing to a link via keyboard or alternate device.
• The links don’t have text in the first place – it’s just an icon.
• The link isn’t actually an anchor tag with a destination. It’s a div, span, or a dead-end link that is either blank, using a hash tag (#), or javascript:void(0) to trigger some other event. Therefore not an actual link. See Karl Grove’s “Links are not buttons, neither are Divs or Spans“.

I plan to address accessible links for code in a future post, but just wanted to point those out in this introduction.

For now, here are some red flags for links within the text-editor in need of non-code changes:

• Links that don’t make sense on their own e.g. out of context. (Read more, this, click, that, over here etc.)
• The link is using a url as text. e.g. www.google.com as link text versus using “visit google’s site” as link text instead.
• The link is written in all caps.
• The link is too long.
• The link is around an image that doesn’t have an alt attribute. For more on using alt in your text-editor, check out an older post of mine, How to make your images accessible.

For a really great list on how to make your links super accessible both code and link text-wise, check out 15 Rules to making Accessible Links.

What can we do right now?

We can go into our text-editors and check that our links are in context. Believe it or not, this will make a difference for screen-reader users. So far in this post, this is what my list of links look like if they’re read out loud:

1. WebAim’s Keyboard Accessibility Page
2. Links are not buttons, neither are Divs or Spans
3. How to make your images accessible
4. 15 Rules to making Accessible Links

I could have written them this way instead, and they wouldn’t have been very accessible friendly. Assume the underlined text are links:

1. WebAim
2. See Karl Grove’s article here.
3. …check out an older post of mine.
4. …check out this article.

See the difference? Here’s another example I grabbed from a baking blog that I’m in love with now. ( Her molten lava cake recipe is SO good! )

Baking example before revisions:

 

She has three links in these two paragraphs. If we pulled out the links by themselves, they would look like this:

1. strawberry rhubarb crumble
2. book
3. Amazon

The first one is good. Knowing we’re on a baking blog, the user is likely to know the first link will take them to a strawberry rhubarb crumble recipe. The second and third link could use improvement. Let’s rewrite the second and third links a bit.

Baking example revised (assume the underlined text are links):

1. Like the strawberry rhubarb crumble that I shared earlier in the week, this is also adapted from my book: The Sweet Side of Ancient Grains. It comes out in a few days and it’s already available on Amazon!
2. I think teff isn’t the easiest flour to find, but you can find Bob’s Red Mill Dark Teff on Amazon.

If we pulled out those same links with the revisions I made, outside of context, this is what they’d be now:

1. strawberry rhubarb crumble
2. my book: The Sweet Side of Ancient Grains
3. Bob’s Red Mill Dark Teff on Amazon

See how those tell you where they’re going even without the surrounding text?

As you can see, there was some re-writing that needed to be done to make the second and third links more accessible. I’m realizing that sometimes you can’t simply work with the text you already have, and revisions are necessary. It’s taking me some practice, and I’m sure it will take you some practice as well, especially if you’re a writer.

Adding in this new habit is a great start though. All it really is, is ensuring your links are to the point, are plain english (not urls for text), aren’t caps, and make sense on their own. Once you’ve gotten the hang of this and want to take text-editor changes to the next level, you can check your alt attributes on your images as well. If you need some help, try Joe Dolson’s WP Accessibility Plugin. It enforces alt attributes on images and there’s even an option to mark an image as decorative only. It’s really handy and being used on this blog.

Anyway, I hope this was helpful! I’m going to keep at it. I hope you will too. Next time, I’d like to go over how we can make links accessible within our theme templates.

If this helped you at all, I’d love to know in the comments. If you like these tutorials so far, feel free to subscribe to RachieVee on the top right sidebar. Thanks for reading!