Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,416
Website GitHub

Using the abbr tag and touch devices

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.

  1. Is that still the best approach in 2024?
  2. 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.
  3. 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?


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

Re: Using the abbr tag and touch devices

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,416
Website GitHub

Re: Using the abbr tag and touch devices

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 😁


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

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

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,626
GitHub Twitter

Re: Using the abbr tag and touch devices

@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
  } 
}

Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

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

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,138
Website

Re: Using the abbr tag and touch devices

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.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

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

Pat64
Plugin Author
From: France
Registered: 2005-12-12
Posts: 1,626
GitHub Twitter

Re: Using the abbr tag and touch devices

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


Patrick.

Github | CodePen | Codier | Simplr theme | Wait Me: a maintenance theme | [\a mi.ni.ma]: a “Low Tech” simple Blog theme.

Offline

Board footer

Powered by FluxBB