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

I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. It’s good to make mistakes

    As a designer and developer I’ve made countless mistakes, but that’s part of the reason I’m good at what I do.

  2. Focus appearance explained

    There’s some great stuff coming up in WCAG 2.2, but there’s one rule that’s particularly difficult to understand, so here it is in a bit more detail.