The abbrelement 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 abbrelement relies on a :hoverstate to reveal an abbreviation’s definition, and :hoverstates do not work well on touch devices.

So I decided to try to find a way to make the abbrelement more accessible on touch devices. This is that story… ;-)

The lab for these abbrexperiments is linked fromthe main lab page, but can also bejumped to directly.

In the end, I think my preferred method would bethe final method, where the author only adds a titleattribute to the first instance of any specific abbrelement, and CSS displays the description via generated content for only the abbrelements that have a titleattribute.

While this method doesput a little responsibility on the author to remember which abbrneeds the title, I don’t think it is too much to ask, andI really like how this pattern does notrequire 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

Top ⇪