Button labels
Allo,
Do buttons need to be tied to labels?
If, instead of an image-type input for which I used to have a label, I use a button, should I keep the label, or should I discard it, accessibility-wise?
Old:
New:
That question aside, are buttons accessible at all?
Wojtek
Do buttons need to be tied to labels?
If, instead of an image-type input for which I used to have a label, I use a button, should I keep the label, or should I discard it, accessibility-wise?
Old:
| Code: |
|
<label for="zzz">.....</label> <input type="image" id="zzz" src="../" ... /> |
New:
| Code: |
|
<button><img src="../" /></button> |
That question aside, are buttons accessible at all?
Wojtek
IMHO: No, you don't need a <label> for a <button>.
The purpose of a <label> is to provide a descriptive clue for an input field that cannot provide one for itself, like a text box, a check box, or a radio button.
If you see an text box all by itself, you'd not know what the author expects you to type into it. With an associated <label>, you may see that you're supposed to enter your name there.
Using the <label> element rather than just arbitrary text, of course, is to help assistive devices to make the connection between the label and the input field it's associated with.
In a regular button, there will be a short text inside the button itself, that informs the user of what clicking the button will accomplish. If you're using an image, you'll of course need to provide an alt text for it, but you know this (probably better than I do, from what I've seen on your excellent site).
Since I have no personal experience with screen readers or other assistive devices, I can't say for certain, but I would like to think that buttons are no less accessible than any other form element.
/Tommy
Tommy has left the building
The purpose of a <label> is to provide a descriptive clue for an input field that cannot provide one for itself, like a text box, a check box, or a radio button.
If you see an text box all by itself, you'd not know what the author expects you to type into it. With an associated <label>, you may see that you're supposed to enter your name there.
Using the <label> element rather than just arbitrary text, of course, is to help assistive devices to make the connection between the label and the input field it's associated with.
In a regular button, there will be a short text inside the button itself, that informs the user of what clicking the button will accomplish. If you're using an image, you'll of course need to provide an alt text for it, but you know this (probably better than I do, from what I've seen on your excellent site).
Since I have no personal experience with screen readers or other assistive devices, I can't say for certain, but I would like to think that buttons are no less accessible than any other form element.
/Tommy
Tommy has left the building
I agree, I wouldn't <label> a <button>.
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Cheers,
Nigel
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
| TOOLman wrote: |
| In a regular button, there will be a short text inside the button itself, that informs the user of what clicking the button will accomplish. Since I have no personal experience with screen readers or other assistive devices, I can't say for certain, but I would like to think that buttons are no less accessible than any other form element. |
Allo,
Thanks for the reply! The problem is that a button leaves some more degrees of freedom than does an input of any type.
1. I may add an image, but not the text. Even if I add an ALT to that image, there is no description provided. Valid, et cetera, but unfriendly. If <label> is not the way to go, and if the web page author does not want to add text to the button (say, for aesthetic reasons), should he add the title? Or add a text prologue before the button in the section?
2. Assume any scenarion on text inside the button. A title for a button would coincide with a title for an image. One might say I should add title to an image. Yet that interferes with the purpose of the button, because it needn;t explain the purpose of it, or what will happen if the button is activated.
I am still unclear on these points...
========
How exactly is the button activated by assistive technologies? Is the content read before the activation control switch is presented to the user?
M.


