Embedded Labels?

Accessibility
1

When it comes to drop-down boxes, is it ever okay to remove the label, and just embed the label inside the drop-down?

For example…


	<select id='commentAgree' name='commentAgree'>
		<option value=''>Do you agree?</option>
		<option value='1'>Yes</option>
		<option value='0'>No</option>
	</select>

My form is limited on space, and such an approach would save me lots of space!!

I sorta like the way it looks, but can also see where it would be confusing… (And it might also be evil when it comes to accessibility?!)

Sincerely,

Debbie

2

Guessing that this is related to your other question regarding the use of a drop-down, rather than radio buttons, have you considered this approach?

<label for="post_{post_number}_yes">
 <option type="radiobutton" name="post_{post_number}" value="yes" id="post_{post_number}_yes"> <img src="/images/yes.png" height="" width="" alt="I agree">
</label>
<label for="post_{post_number}_no">
 <option type="radiobutton" name="post_{post_number}" value="no" id="post_{post_number}_no"> <img src="/images/no.png" height="" width="" alt="I disagree">
</label>

If you use a 10x10 pixel image, this shouldn’t take up any more space than the dropdown option.

3

All part of my last module before I go live, yes. :slight_smile:

Sorry, but I’m not sure what that would do…

It looks like you are toggling between an image of the label/question and the drop-down?

If so, I don’t see how that really is any different from my “Embedded Label” idea.

BTW, I think I found a way to cram a Label and the Drop-down into the little space I have, but nonetheless, I would be curious if my “Embedded Label” has any merits?!

Thanks,

Debbie

4

You could include the label in the HTML but move it off screen for sighted users. Then screen readers see it. I sometimes make the first option the actual question, as well. I don’t really see a problem with it, although you have to set it up carefully so that you understand the resut that comes through—such as what you see in the results if a choice isn’t made.

5

So what do you think about my sample code in my OP?

As long as my PHP looks for a 0 or 1, it should be fine.

Although, like I said above, I think I prefer having normal labels when possible.

Sincerely,

Debbie

6

Not having a value on the first option looks like a problem to me.

7

Why??


if ($commentAgree ==1){
	// Handle Yes

}elseif ($commentAgree ==2){
	// Handle No

}else{
	// Display "Choose a value"

}

Debbie

8

My apologies. I seem to have had a brain failure. This is what I meant:

<label for="post_{post_number}_yes">
 <input type="radiobutton" name="post_{post_number}" value="yes" id="post_{post_number}_yes"> <img src="/images/yes.png" height="" width="" alt="I agree">
</label>
<label for="post_{post_number}_no">
 <input type="radiobutton" name="post_{post_number}" value="no" id="post_{post_number}_no"> <img src="/images/no.png" height="" width="" alt="I disagree">
</label>

As long as my PHP looks for a 0 or 1, it should be fine.

Technically, yes, but remember that ‘’ and 0 are equal in PHP, i.e., false, when you do an equal (==) comparison. You would need to do an identical (===) comparison. Unless the number has a semantic meaning, e.g., being used directly to calculate a score for each post, I would recommend using an alternative scheme, such as ‘yes’ and ‘no’, or ‘agree’ and ‘disagree’. This will also make code maintenance much easier.