[html5] grouping radio buttons with images

[Jukka K. Korpela]

2011-06-23 14:37, Nathan Ziarek wrote:

>> what would be the right choice for grouping the radio and the image
>> toghether?
>
> *<label>*

Yes, and it does more than grouping: it associates them with each other, 
possibly affecting the behavior of the user interface (as discussed below).

> Semantically, it's still correct, since the image is the "description"
> of the radio button choice.

Well, the label element content is supposed to be a "description" in 
_some_ sense - typically, a name, abbreviation, or short phrase, rather 
than a description proper. (For example, the word "apple", not a 
description of an apple.) And an image can play this role too.

Besides, as every image shall have an alt attribute (except for rare 
exceptions that hardly apply here), there is also a textual label 
available, though usually hidden, on graphic browsers.

> And, assuming you use the "for" attribute,
> there is the added benefit that clicking on the image (a larger hit
> target) activates the radio button.

Yes, that's useful, but that is _not_ required in the specs. It is one 
possibility, and a common one, but "On other platforms, the behavior 
might be just to focus the control, or do nothing."
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/