I have a <label> associated with an <input> (for="inputID").
Would I have an accessibility problem if, for example, I added a link between <label> and <input> ?
Example:
<div class="c-input">
<label for="input-1">Label</label>
Link
<input id="input-1" type="text" placeholder="Placeholder">
</div>
Thanks.
It's not a technical WCAG (accessibility) failure. You have the label associated with the <input> by using the for attribute. This allows the label to be announced when a screen reader user tabs to the input field, so that's great. It also allows mouse user to click on the label text and have the focus automatically move to the input field.
However, it's a little odd to have a link between the two. A similar layout is somewhat common for checkboxes (not input fields), especially with "agree to terms and conditions" type of checkboxes. The "terms" is often a link contained within the label whereas in your example, the link is outside the label.
<input type="checkbox" id="mycheck">
<label for="mycheck">Agree to terms and conditions</label>
Similar to your example, a screen reader user will hear the label when they tab to the checkbox ("agree to terms and conditions, checkbox, unchecked"). If they tab again, they'll hear "terms and conditions, link". If they click on the non-link part of the label, the checkbox will toggle. If they click on the link part of the label, the link will navigate to the "terms" page and the checkbox will not toggle. It's a little funky but doesn't fail WCAG.
So back to your example, should the link be part of the label or should it be outside the label? Either way it's not an accessibility failure. You have to decide which behavior you want. If you need the link to be announced as part of the input field's label then the link should be embedded in the label (a child element of the <label>).
Related
You can label an input field with a <label> tag like this:
<label for="username">Username:</label>
<input id="username" name="username" type="text">
But why?
Is it effective for SEO? Or browser rendering? Or better support for mobile or other devices?
The label tag supports with a click the focus on the input element where id attribute equals labels for attribute.
If you have e.g. a checkbox you can choose this one also with a click on the label.
Example:
<input type="checkbox" value="1" id="myCheckbox"/>
// A click here set the focus on the according checkbox without javascript things
// And it's easier to select than a small checkbox element
<label for="myCheckbox">My Checkbox</label>
The primary benefits are:
Accessibility - it lets screen readers know which form control the text applies to, this lets them accurately tell the user what they are expected to enter in a field
Click targets - clicking on the label has the same effect as clicking on the form control, larger click targets are easier to hit, especially when the input is as small as a radio button
I have 4 check boxes and labels corresponding to each is a hyperlink which takes user to the start page of that particular topic. So basically selecting the checkbox has a different function while activating the link performs another function.I know it is not a recommended practice, but can I mark it against any WCAG criteria?
Short answer, 'yes', it violates WCAG 3.2.2 On Input, which is a A (single-A) requirement.
It's not really a great UX for anyone. When you programmatically associate a label with a checkbox using the for attribute such as:
<input type="checkbox" id="foo">
<label for="foo">history</label>
this allows mouse users to click on either the box itself or on the label. If you make the label a link, then clicking on the label will navigate to the links destination instead of checking the box. This would violate the Understandable principle of WCAG, in particular, 3.2.2 On Input
From a screen reader perspective, the issue isn't as bad. For the following code:
<input type="checkbox" id="foo">
<label for="foo">
history
</label>
<input type="checkbox" id="bar">
<label for="bar">favorites</label>
as I tab through the interface, I will hear "history checkbox, not checked" and "favorites checkbox, not checked". Those sound normal. However, in between those two I will hear "history link". The history link will seem to be just "floating out there" in between two checkboxes. The checkboxes will behave correctly and the link will behave correctly, but only because a screen reader user that is not using any vision will not attempt to select the link as the checkbox label.
If you have a low vision user that augments their sight by using a screen reader, they may see some semblance of a checkbox and a label and try to click the label with the mouse and will be confused if taken to a link destination.
You can label an input field with a <label> tag like this:
<label for="username">Username:</label>
<input id="username" name="username" type="text">
But why?
Is it effective for SEO? Or browser rendering? Or better support for mobile or other devices?
The label tag supports with a click the focus on the input element where id attribute equals labels for attribute.
If you have e.g. a checkbox you can choose this one also with a click on the label.
Example:
<input type="checkbox" value="1" id="myCheckbox"/>
// A click here set the focus on the according checkbox without javascript things
// And it's easier to select than a small checkbox element
<label for="myCheckbox">My Checkbox</label>
The primary benefits are:
Accessibility - it lets screen readers know which form control the text applies to, this lets them accurately tell the user what they are expected to enter in a field
Click targets - clicking on the label has the same effect as clicking on the form control, larger click targets are easier to hit, especially when the input is as small as a radio button
Why are "for" attributes for form labels necessary? I've never had a use for them
The main advantage is that clicking on a label with a "for" attribute will auto-focus on that form element. So, a label for an input field will be associated with that input field, and clicking on the label will autofocus the input.
#ChristopherArmstrong's answer is technically correct - but the reason it's a good thing is that people who have trouble pointing correctly (older users, people with disabilities, etc.) are helped by this. It lets them get the cursor "about right" and still land in the right field.
When used with radio buttons, it lets the click on the label select the radio button:
http://jsfiddle.net/DLL73/
notice that clicking on ONE does nothing because it's not using the for attribute, but clicking on TWO selects that radio button.
It will associate the label with the form field. This is especially useful for radio buttons so that you can click the label to select the button, not just the tiny button itself.
However, you don't need to use the for attribute for that, you can also put the radio button inside the label:
<label>
<input type="radio" name="selection" value="yes" />
Certainly
</label>
I usually put a span tag around the text also, so that it can easily be styled using CSS.
I've seen lots of ways to label things in a form such as <label>, <div>, <span>, etc. Is there a right or wrong answer for this? Are there any advantages/disadvantages to any of these?
Thank You
Label is best for accessibility (tab order, screen readers, etc)
See more at:
http://www.communitymx.com/content/article.cfm?cid=02310
I tend to prefer this:
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
Take a look at what Phil Haack thinks...
The proper way to provide a label to a form element is to use <label>:
Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
The <label> element is used to specify labels for controls that do not have implicit labels
Since it is a semantic element providing meaning to your markup user agents can make sense of it and tend to helpfully direct clicks on the label to the element itself (very helpful for tiny controls like checkboxes). Also you're providing helpful assistance to people using screen readers or other accessibility features.
You shouldn't use <div> or <span> to actually label an element. For auxiliary help text, however, they might prove useful. But imho you should stick to the semantic capabilities of HTML where possible and sensible. This is such as case in my eyes.
The best way is this one :
<label for="anInput">This is the input</label>
<input type="text" name="anInput" />
This is especially interesting for checkboxes. If you click the label it will check/uncheck the checkbox. If you click on the label of an input field it selects it.
The tag defines a label for an
input element.
The label element does not render as
anything special for the user.
However, it provides a usability
improvement for mouse users, because
if the user clicks on the text within
the label element, it toggles the
control.
The for attribute of the tag
should be equal to the id attribute of
the related element to bind them
together.
via