[thelist] ID vs name

[Ian Anderson]

Vlad Alexander (XStandard) wrote:

>Hi BJ,
>
>The "name" attribute is valid for form elements in XHTML like <input>, <select> and <textarea>. The "name" attribute has been removed for elements like <a>, <map> and <form>.
>
One reason being, of course, that in some cases you need to use name and 
ID values that are different; radio buttons for example:

[apologies for weird wrapping:]

<label for="theID1"><input type="radio" name="groupName" id="theID1" 
/>thing 1</label>
<label for="theID2"><input type="radio" name="groupName" id="theID2" 
/>thing 2</label>
<label for="theID3"><input type="radio" name="groupName" id="theID3" 
/>thing 3</label>

All buttons in the group must have name values that are the same, but ID 
values that are unique so that the labels are wired up right. Using the 
FOR attribute with IDs makes the labels part of the clickable area; so 
improving usability and accessibility.

<tip type="accessible forms">
Incidentally, for those who are interested in accessible forms, I found 
that using FIELDSET and LEGEND was the only way to make groups of radios 
or checkboxes usable in screen readers. Essentially, each button in a 
group has two labels; the title of the group and the label beside it.

Like this:

Are you a web designer?
(*) Yes () No

You need to hear both to understand what is being asked. But, using only 
labels, the screen reader will tend to read out the label in isolation;

"Yes radio button checked."

For the user, hearing Yes or No on their own is not enough to go on. 
They have to exit forms mode, sniff around to find out what the question 
was, go back into forms mode, try to find that place in the form again, 
and so on. Big nasty.

Putting the question as the LEGEND of a FIELDSET, though, causes it to 
be read before each label, so it would read something like

"Are you a web designer? Yes radio button checked."
[user presses down arrow or equivalent]
"Are you a web designer? No radio button not checked."

I now mark up all checkbox and radio groups like this (in pseudo-markup):

<fieldset>
<legend>Would you like to xxx?</legend>
<label for"r1"><radio id="r1">Yes</label>
<label for"r2"><radio id="r2">No</label>
</fieldset>

This from testing in JAWS and Window-Eyes.

</tip>

HTH

Cheers

Ian