Featured Photo by Christina @ wocintechchat.com on Unsplash
Note: Every link in this post goes to the same place: WebAIM’s guide to accessible hyperlinks. I’m using this link as an example for demonstrating accessible and inaccessible linking styles.
Let’s Talk About Links In Blog Posts
There’s a particular style of linking common in blog posts that seems to date from the early days of the blog-o-sphere, in which bloggers embed a series of links in the body of their blog post, all linking to various examples of the thing they’re discussing without providing any additional information on where the links go. Or maybe they’ll describe the thing, and then say that you can find examples here and here and here and here.
I used to use this style of linking a lot. It was common in the fandom corners of livejournal where I learned blogging, and it has many advantages for a blog writer. It’s a way to embed citations without having to interrupt the flow of a piece. It’s frequently used to provide context at the beginning of posts about things that are happening in web-based communities, before the author goes on to provide their own opinion/analysis. A short summary packed with links keeps that background info compact and skimmable so that folks already up-to-date on the conversation–which is to say, the core audience for the piece–can get right to the author’s analysis. And if you’re trying to establish that a particular thing is common, packing a bunch of links in like that makes a persuasive argument.
From a usability perspective, however, this style of embedded links presents significant accessibility issues–and it’s hard on anyone who actually wants to do the background reading.
Screen Readers and Links
Accessibility-wise, the key thing to understand is that screen readers do not read web pages sequentially, starting in the top left corner and reading straight down from there. Why? Because people don’t read web pages that way. Web pages are not designed to be read that way. They’re designed to draw our attention to key content on the page. And even within that key content–say, the body of a blog post–it is common for folks to skim for the information they’re looking for.
Screen readers do their best to organize the information on a page to make it easy for people to find what they’re looking for. Here’s some of what screen readers do with links:
- Allow users to skip from link to link
- Provide an alphabetized list of links on the page
- Announce each link as a link when reading the link text.
So if someone using a screen reader is trying to find a specific link on your page, a bunch of links that look like this are pretty useless to them: their screen reader is not going to be able to organize those links in a way that helps them find what they’re looking for. On top of that, their screen reader will inform them that every one of those links is a link, so what they’ll hear is “link: a link: bunch of link: links that link: look link: like link: this.” Not exactly the smooth, skimmable intro you want to give your readers.
Other Usability Considerations
“This isn’t accessible to people using assistive devices” is already a good reason to make a different stylistic choice. But the challenges this style of linking presents to folks using screen readers also impact usability for readers interacting with the page via a traditional keyboard and mouse.
If your post opens with a bunch of links that folks have to read first before the post will make sense, that’s already a huge barrier to entry. Most folks are going to get overwhelmed or confused by the necessary background reading, and they’re going to move on along without reading it.
Add onto that a list of links with no context or prioritization, and the barrier is even higher: do people really need to read all those links for the post to make sense? Would one or two links do? If so, which are the most important? What’s going to get them caught up so they can read your post the fastest?
The point of giving people context is to help them orient themselves to the subject at hand so they can understand what you’re saying. A contextless link list does the opposite of that: can you tell which of these links would best cover the aspect of a topic you’re currently confused about? If you followed all those links, then came back, and further down this post realized you wanted to refer back to one of the links, would you remember which word holds the link you wanted? Or would you just see a string of visited links and need to open them all again to find the one you’re looking for?
Rhetorical questions are always a risk, because someone, somewhere, is going to read this and say “yes, I can tell which link I want because I hover over every link before clicking, and I have an eidetic memory so I remember exactly where each link goes.”
If you’re that person, congratulations. Here is your gold star. But you are not the typical reader. If you want your posts to be accessible to the rest of us, you’ll want to write with usability in mind.
Better Approaches
We have plenty of options for including background info in an accessible and minimally-intrusive way.
Explain the Context Yourself
The first option is to write a slightly more in-depth intro to the topic instead of providing links. Dumping a bunch of links in your opening paragraph offloads the work of sorting through all that information onto the reader. As the author of your post, you already know what you’re commenting on, so you can give the reader the context yourself instead of sending them on a scavenger hunt.
On the surface, that may seem like it would be more work. But hunting up and copying and pasting a bunch of links is tedious and time consuming. You might find that spending a few more minutes thinking through what information readers will need and providing that in a brief summary results in more impact for less effort.
Use Descriptive Link Text
Often, when reporting on what’s happening elsewhere on the web, a link is the right tool for the job. Links are a central part of discourse on the web, especially for bloggers.
The trick is to provide enough context with the link so that readers can determine whether that link is useful to them. So rather than saying “people have written about this here and here,” try “For more on this topic, check out WebAIM’s guide to accessible hyperlinks or this guide to accessible hyperlinks from WebAIM.”
Whether we’re talking about a person using assistive tech or someone navigating your page using a typical keyboard and mouse, you’ve now provided link text that makes it easy for people to work out whether a link will answer their questions.
Using Lists
If you’re documenting a conversation that’s spread out across a bunch of blogs, forums, social media posts, etc, a whole bunch of links may be helpful and appropriate. Your links will be far more useful to readers, however, if you provide context, use descriptive link text, and organize your links so they’re easier to scan.
Rather than dropping a plain list of links under a header like “further reading,” or saying “X wrote this post and a bunch of people responded,” take the time to think through how you organize your information. Is there a good general overview folks can start with? Does it make sense to lay out a conversation that’s happened across multiple platforms chronologically? Would an outline format work better, where you link to key points in the discussion and include responses and follow-ups in subsections?
However you lay your list out, provide context in the link text, so folks know where the link will take them and what they’ll learn by clicking through.
As a bonus, if you create an organized list with descriptive link text, you’re providing the “good general overview” that other folks can link to in their posts. That will help establish your post as an important resource on the topic.
Use Heading Tags
Whether you’re writing your own a brief overview or providing a well-organized list of descriptive links, heading tags (such as H1, H2, etc) will help improve usability even further.
Keyboard-only interfaces, including screen readers, use heading tags to assemble a page outline, so that users can skip ahead to the section they’re looking for without having to skip paragraph-by-paragraph.
Headings serve the same purpose for folks navigating using a typical keyboard and mouse: folks who are already caught up on the background reading can skip to the section where you’re making your point about the subject you’re discussing.
Conclusion
As with many aspects of web accessibility, designing your content for inclusivity will make it more useful to all users, regardless of their interface. If you want to educate readers about a topic, think about what context you can easily provide yourself, use the link text for each link to tell people where the link will take them and what it will tell them about the topic, and organize your links with readability in mind.
The Bias 
Thank you for this, I never knew screen readers read links that way. I will do better with my linkage from now on.
LikeLike