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
Related
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>).
I saw the code below, in one of my studying codes:
<form>
<label for="firstName">First Name:(click here cause cursor go inside the input box)</label>
<input id="firstName" type="text">
</form>
I find that the pair of for and id attributes connect the label and input element in the way that the cursor goes inside the input box automatically by clicking on label.
Which other pair of HTML elements can be connected to each other by the for and id attributes set? If it works for many other HTML elements, is there any list or source of the default action occurred by connecting one of them in each pair element?
According to w3school, we can use for with <label> and <output> element. Here is the link.
Adding a for is important, even if they are adjacent. I seem to recall hearing that some screen readers for the visually impaired have problems otherwise. So if you want to be friendly to those who are perhaps using alternate browsers/screen readers, use this method.
I'm trying to implement more accessibility to the website I'm working on. I have a custom checkbox inside a button, followed by a list of checkboxes. When I'm using a screenreader, I expect the screen reader to tell me whenever a checkbox is unmarked/marked. This works for all the checkboxes, except the one inside my button. The purpose of the button is to mark/unmark all other checkboxes in the list (this is done by JavaScript). Everything works, except the screenreader is not saying anything when I unmark/mark it.
Here the code:
<button id="checkAll" class="btn btn-default checkAll checkAllInit"
data-target="#everyCheckbox">
<span class="icon icm icm-checkbox_select" role="checkbox"></span>
<span class="text">Unmark all</span></button>
What follows is basically a list of checkboxes, which all can be reached and understood by keyboard navigation and the screen reader. It's just the button that won't give the correct feedback.
Any suggestions appreciated.
It's not valid html. You can use https://validator.w3.org/nu/ to check your code. A <button> cannot have any interactive components nested in it. See https://www.w3.org/TR/html53/sec-forms.html#the-button-element
Content model: Phrasing content, but there must be no interactive
content descendant.
This will confuse the screen reader. You either need a simple button or a simple checkbox.
If you're not using a native <input type='checkbox'>, then you need role='checkbox' and aria-checked. Just toggle the value of aria-checked between true and false in your javascript and the screen reader will announce the change.
First of all, a button element cannot contain any "interactive content", i.e. no other form controls, audio elements, video elements, etc.
Ideally, you should use native HTML elements, i.e. a form element to wrap around the checkboxes and buttons, and the input element with its type set to checkbox. You'll also need to associate labels with the checkboxes. With these native elements, you don't need WAI-ARIA attributes such as role='checkbox' and aria-checked; these WAI-ARIA attibutes are actually redundant (see e.g. the article On HTML belts and ARIA braces .)
If you have good reasons to create custom checkboxes using a combination span, CSS and JavaScript, you will need additional markup to make these checkboxes accessible:
tabindex="O" to make sure that keyboard users can reach the checkbox,
role='checkbox' to enable screen readers to figure out what type of element they are dealing with,
aria-checked (with the values true or false) to enable screen readers to figure out the state of the checkbox,
aria-labelledby to associate a "label" with the checkbox.
As you can see, if you use custom elements where HTML has native elements, you create a lot of extra work for yourself.
Please see this code for better understanding that how to write accessible checkboxes.
Please define the checkboxes like this:
<h1>Show checkboxes:</h1>
<form action="/action_page.php">
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" value="Boat" checked> I have a boat<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
By using this method the checkboxes will be properly accessible by default and also, screen reader will announce the state.
If there are custom checkboxes which are to be made accessible, then please refer:
https://webdesign.tutsplus.com/tutorials/how-to-make-custom-accessible-checkboxes-and-radio-buttons--cms-32074
I notice this trend in a lot of frameworks, auto-generated code (Zend) and layout templates. The approach I'm talking about is such:
<label for="someField">
<input id="someField" name="someName" />
</label>
What are the pros and cons of this approach vs. the regular one, and why do people tend to take this approach at all?
It seems to be fine judging by W3C standards in both HTML4.01 and HTML5:
HTML4:
"To associate a label with another control implicitly, the control
element must be within the contents of the LABEL element. In this
case, the LABEL may only contain one control element. The label itself
may be positioned before or after the associated control."
In this example, we implicitly associate a labels with a text input control:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
</p>
</form>
It is still fine as of HTML5:
"The label element represents a caption in a user interface. The
caption can be associated with a specific form control, known as the
label element's labeled control, either using the for attribute, or by
putting the form control inside the label element itself. - W3C.
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.