WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Text exposed on Hover

for

From: Mark Magennis
Date: May 19, 2021 8:25AM

If the image is a focusable element (e.g. a button or a link) then all you have to do is make sure the text is also exposed on focus (and ensure that a screen reader announces it of course).

But I suspect your image is not focusable. So you have a problem. You should not make it focusable purely in order to cause it to show the text because being focusable means it is interactive (it does something when you click on it). So non-interactive elements should not receive focus while tabbing. The same is true of making the text itself keyboard focusable. If it were to appear and be given focus while tabbing, that would not be correct behaviour because it is not an interactive element.

An alternative is to make the image a button that is clicked to show the text. This is sometimes referred to as a 'toggletip', which is a way to solve the problems I've described of having tooltips attached to non-interactive elements.

Mark

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Radhika Soni
Sent: 19 May 2021 14:15
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] [WebAIM] Text exposed on Hover

Good Morning Everyone,

How would you solve for when some text on the image is exposed on hover?
Any ideas?
Is it ok to provide keyboard focus to the text in that case?


Regards,
-Radhika