Keyboard accessibility for divs containing images as options

Question

I just replaced a radio button for selecting the users mobile device with divs containing images of the phone instead. I am using a JQuery click event to detect when the user chooses an option. How can I make this keyboard accessible?

Answer 1

Buttons can contain HTML and so for keyboard accessibility a button seems to work much better. Of course, the behaviour isn't quite the same as radio buttons. Additionally, IE<8 returns the inner html instead of the value attribute.

Answer 2

From the better to the worse (IMO), you could:

• style radio buttons with your images, in JS obviously because support for form styling is erratic across browsers. If you don't have visible labels anymore, you should at least display them outside of the screen. And better, do the latter only after having test in JS that images are really displayed on screen. The text alternative of your images could be unsufficient in this case.

• Use images in focusable elements only: links and form elements. Your answer about buttons is right. As above, be careful with the alternative text and hide labels (not with display: none; or visibility: hidden; or they wouldn't be read by screen readers anymore, just display them outside them outside of the screen with text-indent or relative/absolute positioning

• Use tabindex on the divs so they'll be focusable and then have to add tabindex on every focusable elements, in the right order. Quite a nightmare in the short and long term.