hoping for a little steer here
A project has come up at work, we have a 'Road Map' image that visually depicts a user journey through a service. At present, the image has a null Alt attribute, as all of the text within the image is on the page and the image is merely eye-candy.
Some stakeholders would like the functionality to touch or click a part of the image then be taken to the heading with the corresponding ID. Pretty simple to implement, with and <area(s)>.
This is technically permissible in WCAG 2.1 AA, however, sighted keyboard users would not get the benefit of knowing where they were, in the tab order. A screen reader user would be fine, as with proper Alt text on the and <area(s)> it would act just like a table of contents.
The bounding rect, cannot be styled with CSS (at least not in a way I know of) and I'm not going to implement something that will create confusion for any user.
It would appear WCAG 2.0 required a title attribute and WCAG 2.1 does not, which makes sense, as that is only available to mouse users and makes links etc more verbose to screen readers.
I'll stop waffling and get to the point. What would my options be, for providing some kind of visible focus, especially for sighted keyboard users?
Any guidance would be appreciated.
Thanks, in advance.