Using the abbr tag and touch devices

Bloke · 2024-02-20 19:47:27

My website makes fairly routine uses of <abbr> via Textile to make comedy references to abbreviations. That’s all very good for users that have pointing devices that can hover over the dotted definition and see a tooltip. But keyboard users and touch devices are left out in the cold.

I’ve found a possible CSS workaround from 2018 and have a few questions.

Is that still the best approach in 2024?
Is it dependent on adding tabindex? Or can I make do without it? I don’t relish going through a few hundred articles and altering the Textile markup to add that attribute… if indeed it’s geared up to do so.
Can I tech my way out of the above by automatically adding the tabindex attribute to any abbr tags via JS? Or does that not work because it’s not in the markup at page load time?

Are there any other approaches I should consider to make the tag more device friendly?

And as a further bonus question, if that is the best approach, should we request a change to Textile to more easily facilitate adding the tabindex – or even add it by default – if it’s generally useful and doesn’t detract from the keyboard navigation experience?

phiw13 · 2024-02-20 22:28:17

Your solution is an option yes. It is dependent on tabindex to enable focus on the <abbr />element. You of course can add that attribute with JS after the page has loaded.

And as a further bonus question, if that is the best approach, should we request a change to Textile to more easily facilitate adding the tabindex – or even add it by default – if it’s generally useful and doesn’t detract from the keyboard navigation experience?

No and no.

Best practice for use of the <abbr />: first occurence of the abbreviation, spell out the string fully with the abbreviation between brackets. Later occurrences do not need to bother with adding the title attribute (which is in itself poorly accessible as it does not scale well on page zoom).

… the World Trade Organisation (<abbr>WTO</abbr>) has decided that this and that and something …

And, no if your page makes often use of abbreviations, it is a poor experience… tab tab tab through all those elements that do nothing in fact to reach an interactive element.

Bottom line: if you really want to go that route, use JS to add the tabindex.

Bloke · 2024-02-21 01:07:03

Cool, thanks for the analysis. I’ll leave it then as they’re mostly only there as a joke. Doesn’t make sense to spell them out. Saves me work too 😁

Pat64 · 2024-02-21 04:05:13

@Stef

Maybe the simplest way in your case could be to display the title content to Mobiles only:

abbr[title]::after{
content:'('attr(title)')';
padding-inline:.3em
}

@media screen and (min-width:720px){
  abbr[title]::after{
  content:unset;
  padding-inline:unset
  } 
}

phiw13 · 2024-02-21 04:59:06

But but but, Patrick, how do I enjoy those on my 1360px wide tablet then while standing in train traveling at 300+ km/h?

@media screen and (any-pointer:coarse) {
  abbr[title]::after { /* ………… */ }
}

That would cover all type of devices without a mouse or trackpad or similar pointing mechanism.

Pat64 · 2024-02-21 05:06:15

Sure! Your solution is perfect.
(That was just a concept ;) )

Textpattern CMS

Textpattern CMS support forum

#1 2024-02-20 19:47:27

Using the abbr tag and touch devices

#2 2024-02-20 22:28:17

Re: Using the abbr tag and touch devices

#3 2024-02-21 01:07:03

Re: Using the abbr tag and touch devices

#4 2024-02-21 04:05:13

Re: Using the abbr tag and touch devices

#5 2024-02-21 04:59:06

Re: Using the abbr tag and touch devices

#6 2024-02-21 05:06:15

Re: Using the abbr tag and touch devices

Board footer