Question

I have implemented something, which looks like this: if a user clicks on a div, a picture changes in another div:

<div id="actionDiv" onClick="changePic();">Change Pic</div>
<div id="picHolder"></div>

So this text “Change Pic” can easily be accessed by mouse. How do I get focus from tab key in the text div actionDiv for accessibility?

Answer 1

I’m not sure, but the question seems similar to this one how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it and the answer is basically to give the div a tabIndex attribute, i.e.:

<div id="actionDiv" tabIndex="0" onClick="changePic();">Change Pic</div>