Keyboard accessibility for divs containing images as options
I just replaced a radio button for selecting the users mobile device with divs containing images 开发者_JS百科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?
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
label
s (not withdisplay: none;
orvisibility: hidden;
or they wouldn't be read by screen readers anymore, just display them outside them outside of the screen withtext-indent
or relative/absolute positioningUse tabindex on the
div
s 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.
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.
精彩评论