Can't tab into an image map area

Question

I want to add accessibility to this image map so in addition (or instead of) hovering they can tab through the page and the area shape will become focused to reveal the text. (I know it's using a mouseover right now, I'm just trying to fix the focus problem first).

Here's an example of what I am trying to use:

<img src=img.png align='center' alt='some text' height='480px' width='1000px'
usemap='#imagemap'>

<map name = 'imagemap'>

<area shape='rect' style='position:relative' id=upperLeft coords='22,70,245,190'
tabIndex='0' alt='alt upper left text' onMouseOver=addUpperLeftText(this);></map>
<span id='upper_left'></span>

function addUpperLeftText(e){
    var upper_left_text = 'Upper left text';
    var cssObj = {
            'position': 'absolute',
            'width': '180px',
            'top': '155px',
            'left': '55px',
            'font-size': '18px',
            'line-height': '20px'
    };
    $('<p>').appendTo('#upper_left').text(upper_left_text).css(cssObj);
    e.onmouseover = null;
}

I've tried adding tabindex and an empty href, and my searching for other solutions have come up short. I just want to have the area shape become focused when one tabs through the page.

Thank you in advance!

Answer 1

you can do this with absolute positioned anchor elements, doesn't even require jQuery

demo jsfiddle

<div class="imgContainer">
    <img src="//placehold.it/1000x480" align="center" alt="some text" height="480" width="1000" />
    <a id="hotspot1" href="javascript:void(0)"></a>
    <a id="hotspot2" href="javascript:void(0)"></a>
    <a id="hotspot3" href="javascript:void(0)"></a>
</div>

.imgContainer {
    position:relative;
    width:1000px;
    height:480px;
}

.imgContainer a {
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid #eee;
}

.imgContainer a:focus, .imgContainer a:hover {
    background:rgba(255, 0, 0, .5);
}

#hotspot1 {
    top:20px;
    left:77px;
}

#hotspot2 {
    top:180px;
    left:320px;
}

#hotspot3 {
    top:200px;
    left:177px;
}