How to deal with an image-map regarding accessibility?
Currently, I'm trying to fix some accessibility issues on a single page website. This website consists of various elements (e.g., collapsed menus) in addition to a part where an image-map is used to provide some interactivity to the user. The user can click on multiple elements on the image to show additional text next to it.
I'll try to emulate how a vision-impaired person could interact with the site, using ChromeVox, VoiceOver on Mac and NVDA on Windows.
I do struggle with the right markup to provide the user with an easier way to navigate through the tricky map part. In general, I imagine a vision-impaired user would navigate with the help of the tab-key and mouseover.
The following code is currently triggering the text to display and can be read and focused by assisting tools although it seems like there are wrong attributes included (e.g., title-attribute and empty href-attribute).
<area href="" alt="<alt>" title="<title>" onclick="<onclickmethod>" mapcontent="<mapcontent>" coords="<X>,<Y>,<Z>" shape="circle">
What kind of ARIA attribute, additional description or rearrangement of elements should I consider to help users to navigate through the site without missing out on the additional text?