abbr element is extremely useful for usability (who wants to read “Cascading Style Sheets” when they could just read “CSS”?) and for accessibility (semantic markup that provides meta information about the abbreviation).
But natively the
abbr element relies on a
:hover state to reveal an abbreviation’s definition, and
:hover states do not work well on touch devices.
So I decided to try to find a way to make the
abbr element more accessible on touch devices. This is that story… ;-)
The lab for these
abbr experiments is linked from the main lab page, but can also be jumped to directly.
In the end, I think my preferred method would be the final method, where the author only adds a
title attribute to the first instance of any specific
abbr element, and CSS displays the description via generated content for only the
abbr elements that have a
While this method does put a little responsibility on the author to remember which
abbr needs the
title, I don’t think it is too much to ask, and I really like how this pattern does not require JS, and follows the familiar print-format pattern.
Hopefully this helped a little, and provides a few options for trying to help make the web a little more accessible.