Accessibility and radio buttons without labels

Question

So I decided I'd better make my little survey form generator accessibility compliant. Doing this for single multiple-choice questions presented no problem, whether they used radio buttons or checkboxes, since each multiple choice was itself the label. But what about when an array or panel of questions all have the same multiple choices?

For example:

I have this code:

<tr><td></td><td>Small</td><td>Medium</td><td>Large</td></tr>

<tr><td>3. What size Coke do you prefer?</td>
<td><label for="Q3.1"></label><input id="Q3.1" type="radio" name="responses[0]" value="1"></td>
<td><label for="Q3.2"></label><input id="Q3.2" type="radio" name="responses[0]" value="2"></td>
<td><label for="Q3.3"></label><input id="Q3.3" type="radio" name="responses[0]" value="3"></td></tr>

<tr><td>4. What size popcorn do you prefer?</td>
<td><label for="Q4.1"></label><input id="Q4.1" type="radio" name="responses[1]" value="1"></td>
<td><label for="Q4.2"></label><input id="Q4.2" type="radio" name="responses[1]" value="2"></td>
<td><label for="Q4.3"></label><input id="Q4.3" type="radio" name="responses[1]" value="3"></td></tr>

My questions:

1.- The W3.org validator passes the code as valid, but is it really "accessible?" Will a competent web page reader interpret this correctly to a visually impaired user?

2.- If not, is there a way to have some kind of hidden label that the reader reads but that is not visible to the eye?

3.- If not, is it design decision time, where you either have this type of question, or you have good accessibility, but not both?

Answer 1

Without retracting the answer I accepted, I'm adding an answer because I've since discovered additional information that more completely answers my question. The issue was what to do in the context of accessibility in the case where radio buttons did not each have their own label. How to add labels that a reader for the visually impaired will see but that the unaided human eye won't see? Reasonably enough, the answer was to use CSS to hide the label from the latter but not the former.

It turns out that w3.org has a section on its website called WCAG (Web Content Accessibility Guidelines), and there I found technique H65, "Using the title attribute to identify form controls when the label element cannot be used." It specifically mentions a survey form, and it recommends using the title attribute.

Example 4: A data table of form controls

A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen LABEL) it is difficult for non- visual users to pause and interrogate for corresponding row/column header values using their assistive technology while tabbing through the form.

For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button is a concatenation of the answer choice (column header) and the text of the question (row header) with a hyphen or colon as a separator.

http://www.w3.org/TR/WCAG20-TECHS/H65.html

Ok, I hope this helps somebody. I've had so many questions answered on StackOverflow not because I posted them but because some else had the same question!

Answer 2

1. No, it is not accessible. A label element with empty content is useless or worse. It is worse than useless when the user, when focused on a control, asks for the label of the control and the user agent supports the label element as intended. It will then announce an empty string as the label, adding to the user’s confusion. (Accessibility checkers perform very limited testing. Most of accessibility issues cannot be checked programmatically.)

2. There are several ways to provide a “hidden label”, but this would cover only some of the purposes of a real label. A user who has no problem with eyesight may need to know what a radio button means, e.g. due to a cognitive disability. A different approach is to use the aria-labelledby attribute. In this case, you would need to specify id attributes for the elements containing the texts “Small”, “Medium”, and “Large” and use each id attribute value in aria-labelledby attributes for the radio buttons. But support to this is rather limited; this attribute would help a small fraction of users only.

3. It’s a design decision where you primarily need to decide on the type of controls and overall setup. The problem vanishes if you use a select element instead of each set of radio buttons. This might be unacceptable to people who think that on-screen forms need to imitate paper forms, or for other reasons. The problem changes its type if you instead use a text input field, expecting the user to type S, M, or L. This would have the potential accessibility problem that the user might not remember what the alternatives are, even when they were explained at the start of the form.

Answer 3

Your labels have no content, so non-sighted users won't know what the inputs represent. I'd put the small, medium, large text in the relevant labels and then visually hide the labels. Use the offscreen or clip technique, so screenreader software will pick it up but sighted users won't have to see it repeated for every question.

Answer 4

1. What you have done is fine.

2. You can make an input that has a value of hidden. Though I don't know what you meant by not seen by the eye.

   <input type="hidden" value="whatever">

This can be seen by the server though not the user.