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. XHTML syntax is still worth using

    A few weeks ago I read an article on CSS-Tricks about writing HTML the HTML way, not the XHTML way, and it has been bothering me a bit.

  2. Booleans in ARIA

    HTML booleans are bit quirky but, as if just to complicate things, booleans in ARIA work slightly differently. It’s worth knowing how and why.