Making abbr titles accessible on touch screen?

[tomasz86]

Normally abbr titles are shown on hover. I’d like to be able to view them on touch screen devices too. I’ve come up with this solution:

http://codepen.io/tomasz86/pen/nhisy

which utilises an empty anchor inside abbr. It works but there are at least two problems:

1. Titles are shown twice on mouse hover.
2. a:after is positioned absolutely, relative to abbr. It can still overflow body and thus be inaccessible if there’s not enough space on the right side of it.

What do you think? Is there any better solution to show titles without relying on hover?

[tomasz86]

You’re right about using active instead of hover. It seems to do the job – the special tool tip is displayed only when clicking / tapping on the link. Thank you :)

I’m not really sure about putting span text inside the abbr tag which by definition should include only abbreviations…

[tomasz86]

This is the final result at the moment:

http://codepen.io/tomasz86/pen/nhisy

after a little bit of simplification.

This way it’s fully accessible for keyboard users but I still don’t know how to deal with abbreviations which are real links at the same time, as clicking on them redirects you to another website, thus the tooltip is shown only for a very short time.

[tomasz86]

Yes, that’s the problem. You can see the tooltip for a very short time before being redirected to the other site.

I’ve seen several solutions which used an additional span element that blocked the link until clicked so that you had to click twice in order to be redirected. I don’t really think such a method is good though.

[Author]

Posts