The 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 title attribute.
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.
Happy abbreviating,
Atg