Skip navigation.

How to enhance <abbr> elements for touch devices

HTTP, TLS, HTML, CSS, JS, WWW, CMS, SPA, AJAX, SEO, etc. Technology people use many abbreviations. They are short and concise—in case everyone knows what they mean. Unfortunately they can be a barrier for the uninitiated—especially as many abbreviations can have multiple meanings.

I write on technical topics, therefore I want to make sure everyone understands my abbreviations. <abbr> to the rescue! It allows to provide the full term to an abbreviation via a title attribute.

<abbr title="Hypertext Markup Language">HTML</abbr>

Problem

Hovering the element with a mouse pointer shows a tooltip with the full term. Unfortunately I noticed that this behaviour has no fallback on touch devices. This creates a confusing scenario for users of touch devices. <abbr> elements are usually decorated with a dotted underline, so users expect that they can interact with it in some way.

This shows how mobile web design really asks us web citizens to avoid using hover effects for anything but visual effect.

Solution

My goal was to find a CSS only solution to this issue to make the <abbr> element functional on touch devices.

First I tried to create a tooltip in CSS without success. Most tooltips had issues being positioned properly on small touch screens.

Then I remembered how <a> elements are handled in print mode on many websites. They often display the full link URL after the link in brackets. This is usually done with a print media query, so I searched for something similar for "hover effects". Who would have thought, the browser gods actually just implemented a hover media query that solves exactly this topic. It allows to check if a user agent has capabilities to hover. Hurrah!

This is the solution I came up with:

/* 1 */

@media not screen and (hover: hover) {
abbr[title] {
text-decoration: none;
}

abbr[title]:after {
content: " (" attr(title) ") ";
}
}

/* 2 */

@media screen and (hover: hover) {
abbr[title] {
text-decoration: underline dotted;
}
}

(1) In case the device has no hover option (or is in print mode) the snippet outputs the full term within brackets following the abbreviation. Additionally it will remove the dotted underline to remove the temptation to click the abbreviated term.

(2) In case the device has a hover option, and in case the <abbr> element has a title attribute it will be styled with a dotted underline. The full term is shown in case the user hovers the abbreviation.

According to caniuse.com the hover media query appears to be supported on most browsers on touch devices. In case a browser does not support the hover media query the snippet just applies the default styling of the browser. Progressive enhancement FTW!.

One last point on accessibility: I read that it might happen to some screen reader users that both the CSS :after content attribute and the title tag is read out (depending on the screen reader setting for the <abbr> element)! I could not find a definitive answer on this. I will update the note as soon as I have more information on this.