Skip to main content

Links, missing href attributes, and over-engineered code

First posted in Accessibility, Development and HTML; updated 1st October 2021

Just the other day, I was chatting to a software tester I work with about an accessibility issue they were having with a link. It looked like a link, worked fine with a mouse pointer and keyboard, but it wasn’t behaving as expected using NVDA, a screen reader for Windows. The HTML looked something like this:

<a tabindex="0" id="unique-identifier">Link text</a>

Can you spot what’s missing? That’s right: no href attribute.

Without an href, a link is simply a placeholder for a link. From the HTML Living Standard:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant

Essentially, an <a> without an href is meaningless; it might as well be a <span>.

href-less <a> elements don’t receive focus when navigating a page with the tab key, and their default browser styling is exactly the same as their surrounding text, rather than dark blue (#0000ee) and underlined.

I’m assuming this was a knowledge gap rather than over-enthusiasm or a technical limitation, but one way or another, by omitting the href the developer(s) who wrote this code actually made quite a bit of extra work for themselves:

  • Set up JavaScript redirects based on the id to do what the href would have done
  • Add the tabindex="0" attribute to ensure the ‘link’ was focusable with the tab key
  • Style links without the :link pseudo-class

They also made the link inaccessible to some screen reader users.

Recreating HTML’s built-in functionality manually is time consuming and more error prone. If some code you write doesn’t work as expected, before reaching for JavaScript, writing more CSS, and adding HTML attributes, check it’s not just a missing href.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Mac event 2021

    Apple had their final event of the year last night and it was especially exciting as I’m in the market for a new Mac. Here are my thoughts.

  2. Face ID on the Mac won’t happen

    With an October Mac event looming, I got to thinking about Face ID on the Mac; I don’t think it’ll be added now, and might not ever be.