How Can I Show Focus On Images That Are Tabbed To?
June 10, 2022 12:00 AM
I have a single image of a series of boxes with text in each of them. Each box in the single image is covered with an individual image of a solid box with a plus in the center -- the idea is that the learner clicks on each solid box to make it disappear and reveal the box with the text that's below it. For accessibility purposes, we want that to work with a keyboard as well as a mouse (tab to each box and press Enter to activate the reveal), and, it turns out, it does (yay!). However, unfortunately, the learner can't tell that it works, because, as you tab to each of the solid boxes, there's nothing to indicate that it has focus (even though it does) -- you don't see a line around the box image or anything. (See bottom example.)
This is weird, because, when you start tabbing and get to the navigation buttons I put in, those DO show focus with a line around them as you tab to them! (See top example.)
So, how can I get the box images to show focus (have a line around it) so that the learner will know that tabbing to them actually IS working?
Solution
Hi @tecocat Great graphics! We suggest you turn on Web Accessibility settings. This will give you a good working focus indicator and you can manage the color and thickness.
Discussion (2)
Hi @tecocat Great graphics! We suggest you turn on Web Accessibility settings. This will give you a good working focus indicator and you can manage the color and thickness.