URLs and Screen Readers for an Annotated Bibliography

Help & Questions OER Creation
1

I am leading a team developing an annotated bibliography (details here). I spoke with a librarian yesterday, and she brought up the issue of how screen readers read out URLs. Apparently the preferred approach is to add a hyperlink to text that can more easily be read by the screen reader. Since the product is ultimately an annotated bibliography, it seems that the bibliography entries should actually contain complete URLs to the cited resource. Thus, I’m torn between two options, 1) staying true to a “bibliography” and including complete URLs in each bibliography entry, or 2) adding text with a hyperlink that can more easily be read by screen readers.

What are everyone’s thoughts on this issue?

2

Hiya! I’m Baldur, one of Rebus’s developers. I’ve spent quite a bit of time on accessibility issues but also used to be in academia back in a former life so this is right in my wheelhouse. :slight_smile:

The first thing to note is that the librarian is absolutely right: URLs are generally gobbledeegook. They are long strings of garbled nonsense for most people but extra ‘nonsense-y’ to screen readers. This goes extra for DOI URLs which are just numbers and random letters. So the accepted best practice is for the URL to be marked up as a hyperlink with descriptive text. However the URL is an important part of the bibliographic record so hiding it completely is not a real option.

The problem here, from the perspective of the screen reader is twofold:

  1. You need a link and its purpose needs to be clear either from its text or from the context.
  2. Having to listen to a screen reader spell out potentially hundreds of URLs is a pain.

There is a lot of scope in exactly how you solve that, depending on the tools you are using to put things together and the general context.

Here’s what I would do:

The first thing to do is to make sure that the bibliographic reference has a hyperlink in it, not just for screen readers but also for regular readers in digital (copy-pasting a URL to navigate to it is error prone, especially on mobile). The URL itself at least should be marked up as a link that goes to that URL.

Now, technically, according to the Web Content Accessibility Guidelines on links you have solved problem number one above, which is the biggest problem. Most users of screen readers will be able to figure out from the context that the marked up URL is the link for the bibliographic reference, esp. since they are likely to already be familiar with academic writing and reference practices.

Ideally, what you’d do next is edit the HTML for the hyperlink and add an ‘aria-label’ atribute to it with more descriptive text. Something like:

<a aria-label="Understanding Success Criterion 2.4.4: Link Purpose (In Context)" href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context">https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context</a>

‘aria-label’ lets you overrride the text of a hyperlink for screen readers and other kinds of accessibility tech so from their perspective the URL is no longer the text of the above link but what is in the attribute. No more painful spelling out of the URL.

Obviously, having to edit the HTML of countless links might be tricky if the tools you are using don’t support it. If it isn’t doable then it’s better to at least have the URLs linked with proper hyperlinks even if the text is painful for screen readers. It isn’t ideal but most readers are likely have some understanding that bibliographic references are always going to be awkward for screen readers.

My 2 cents :slight_smile:

2 Likes
3

Thanks, @baldur. This approach was actually one option I was thinking about, but I wasn’t sure how to actually approach it. I figured there would be some what to tell the screen reader to read the URL differently. I will try this approach.

Thanks again.

2 Likes
4

That’s a neat little solution, albeit a bit labour intensive. I do like how this still allows for readers accessing the bibliography as a printed copy to see the full URL information (which may have been lost if the text was only hyperlinked).