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.
Related
I have 2 forms on one page having the same fields and labels. When I run accessibility check, it runs into an issue saying
Control labels should be unique on a page or be close to text providing context.
Controls with the same visible label need extra context (such as a heading) near the control to explain the differences between the fields. Note that the aria-label does not set the visible label.
Reference Link - https://www.powermapper.com/products/sortsite/rules/acchtmlformcontrolduplicatelabel/
The fields have unique for and id
FORM 1
<div class="form-field__item form-field__item--text">
<input id="whitepaper_signup_first_name" class="input form-field__input input--text" name="firstName" type="text" required="">
<label for="whitepaper_signup_first_name" class="form-field__label form-field__label--dynamic">First name</label>
</div>
FORM 2
<div class="form-field__item form-field__item--text">
<input id="homepage_lead_form_first_name" class="input form-field__input input--text" name="firstName" type="text" required="">
<label for="homepage_lead_form_first_name" class="form-field__label form-field__label--dynamic">First name</label>
</div>
Is there a way with aria-label or aria-labelledby?
This error appears to be more of a UI best-practice, as opposed to a WGAG failure. The idea is that the user needs to be able to differentiate between what you're asking for in each field.
If you are asking for the first name of the same person in both inputs, then there's nothing you need to do here and you can ignore the warning. If not, maybe you should update both labels to be more descriptive.
When navigating in forms mode, screen readers will not read any text around an input field. This includes headings and any adjacent text that's not part of the label element. For this reason, it's important that each label accurately describes what the user is expected to enter.
The advice to distinguish the accessible names seems to go beyond WCAG 2.1 Success Criterion 2.4.6.
However, if you want to prevent this tool from making this complaint, then you can accomplish that by changing the labeling mechanism. It is currently a label element. You can change it to an aria-labelledby attribute on the input element. That allows you to chain more than one element’s text content together as the label. Then one part of each label can be an element whose text content describes the form itself. That form-level label can be referenced by the aria-labelledby attribute of each control in the form.
If you address this issue in that way, you will still leave another accessibility flaw to be addressed. When you ask a user for the user’s first name, you are creating an input that is subject to WCAG 2.1 Success Criterion 1.3.5. To satisfy that criterion you can add an autocomplete="given-name" attribute to the input element.
im working on updating a site for compliance. the site is mostly AngularJS which im still new to but learning. i found a situation where there is a label targeting a div tag however the label has no :for attribute, instead has an :id and the div has a :label-id targeting the :id of the label tag...when i tried to adjust it, it broke on the front-end so im not sure what im seeing...im curious if this will pass WCAG AA?
i have tried a screen reader, NVDA, no issues...however a crawler i used flagged the label element for not having a :for attribute...i have tried searching for the :label-id attribute with no luck which im guessing means its custom...im guessing a lot of the issue is related to my lack of understanding angularJS...
<div class="groupA">
<label id="elementA">Element A is for Apple</label>
<div class"customSelectA" label-id="elementA">...stuff shows up here after clicking the label and there are also a bunch of angular attributes on this div that are not relevant to my question</div>
</div>
I'd recommend going to the basics and ignoring angular for the moment.
Look at the spec for the <label> element. It has a for attribute that can point to a form element. The ID must point to a "labelable element" (<input>, <button>, <select>, etc).
So the following is valid:
<label for="myID">Element A is for Apple</label>
<input id="myID" type="checkbox">
but the following is not:
<label for="myID">Element A is for Apple</label>
<div id="myID"></div>
In fact, if you run the above example through an html validator, https://validator.w3.org/nu, it will flag it in error:
Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
Regarding the label-id attribute, it does not exist. It's not part of the html language. It appears to be a custom attribute but custom attributes should start with "data-".
You can have a <label> without a for attribute such as:
<label id="newID">Element A is for Apple</label>
<input type="checkbox" aria-labelledby="newID">
In this case, the <input> points back to the <label> instead of the <label> pointing to the <input>, but that's a poor use of the <label> element. You won't gain the benefit of the <label>. The first example lets you click on the text of the <label> and the checkbox will be selected. In the last example, while the checkbox will be labeled by the text, you can't click on the text to select the checkbox.
The HTML tag <label> may not contain block elements by definition. The following code is wrong in HTML 4, although ist works in most browsers:
<input type="radio" value="A" name="ABC" id="ABC_A">
<label for="ABC_A">
<p>Option A</p>
<p>Having a good time with HTML.</p>
</label>
I could make a block element from the <label> via CSS, but this still remains invalid HTML code. And in some instances, it makes sense to format one label into multiple paragraphs.
My question is: Is there a valid way in HTML to use block elements as a label for an input?
Possible workarounds, that I have considered inappropriate are:
Creating one label within each paragraph (why should one input have a dozend labels - and which one should a screen reader read, then?)
Using JavaScript to have the input "clicked" when the block element is clicked. I am searching for a solution that will work without scripting (and that is supported by vommon screen readers)
And ideas? Thank you!
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.
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