Titles, tooltips, and accessibility

I'm working on a multilingual page and where other languages happen I add titles where appropriate like
<span lang="zh-Hant" title="flower in Chinese">花</span>
<span lang="zh-Hant" title="flower in Chinese">花</span>
or
<dt title="Hangeul">Korean</dt>
<dt title="Hangeul">Korean</dt>
. I was finding that the tooltips were taking almost 2 seconds to appear so I wanted to have a more instant notification that help was on the way. I considered colouring the text or add some other visual indicator and may still do that, but I found styling the cursor when the text is hovered like so
dt:hover[title]:hover, span[title]:hover, .emoticon:hover { cursor: help; }
dt:hover[title]:hover, span[title]:hover, .emoticon:hover { cursor: help; }
works great for people using mice. What I have no idea, is how accessibility tools work with spans and if I should be adding :focus or :focus-within styles or ???. For that matter, I suppose that touch device users are also being left out. 8-( Is action needed for accessibility?
1 Reply
glutonium
glutonium9mo ago
for span tags and such non semantic tags, well u can always use area labeling to make non semantic tags have semantic meanings but since your ultimate goal here is to just let the user know that help is on the way, just simply add an animation or use js to show a pop up on top of the page to let the user know help is on the way
Want results from more Discord servers?
Add your server