Making the <abbr> tag actually helpful

For the most part, <abbr> is more work than it’s worth ( IMO ). The default styling isn’t great, you have to manually add the title="", and the only visibility is after you’ve hovered for a second or two. This also leaves no room for keyboard tabbing, which seems like it skips an accessibility check. So, if you chose to use it in your markup, you likely did so for a reason. And if you’re already adding an inline tag (with title attribute), why not also add…a tabindex!

<p>I flew out from <abbr title="Gerald R. Ford International Airport" tabindex="0">GRR</abbr>.</p>

It should be noted that could also be done later with javascript too.

// Find all <abbr> tags on the page
const allAbbrTags = document.querySelectorAll('abbr');
// Add tabindex to each element
allAbbrTags.forEach((abbrTag) => {
  abbrTag.setAttribute('tabindex', '0');
});

It should also be noted that that’s not the main purpose here. I personally tend to use the tab button to navigate sites, so it was a huge win for me. The main point of adding purpose to the hidden abbreviation isn’t lost without a keyboard tab. The initial “tab” doesn’t do much more than freeze our screen in the middle of a paragraph, most of the time. But, a small amount of [S]CSS can turn this into a show/hide functionality, and suddenly, it has purpose! Or at very minimum, slight click event functionality.

abbr {
  cursor: help;

  &:focus {
		font-size: 0;
		line-height: initial;

		&::after {
			content: attr(title);
			display: inline-block;
			line-height: inherit;
		}
	}
}

ABBR, resurrected!

So there you go. It’s not much, but to me, it resurrects the dead HTML tag for a little bit of fun. As far as I’m aware, this is accessible via WCAG standards, but please let me know if that is not the case!