If I want to associated one label with two forms inputs, say "Expiration Date" for the label for two inputs "ExpirationMonth" and "ExpirationYear", what is the best semantic approach to do this?
There isn’t a way to associate a label with more than one input field, because a label is, by definition, a label for a single field. The reasons for using a label element are based on such a simple correspondence, so there’s no point in using it for two fields simultaneously.
If you are required to have two input fields, on one hand, and to comply with WCAG 2.0 (which makes label markup mandatory for input boxes, H44) on the other, then you need to have separate labels for each of the boxes.
In practice, it is better to have a single field for month/year input, and then you won’t have this problem. (I’m sure most users will find it more natural to type “10/12” than to type “10”, click on a next input box – or hit TAB, but most users don’t – and then type “12”. And any attempt at auto-tabbing from one field to another will cause confusion.)
There is a solution using the title and aria-labelledby attributes.
Here is an example:
<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
...
<option 31>31
</select>
This "passes" the http://wave.webaim.org/ accessibility checker.
Related
I'm learning web development for fun.
Now I am making a drop-down menu that asks security questions. I learned how to create one from a tutorial online. What I'm still confused about is why the value attribute is excluded for the answer's input tag. I thought it would be needed to send the answer to the server? Does the name attribute allow the answer to be sent?
My code is below.
Thanks in advance!
<label for="question">Security question</label>
<select name="question" id="question">
<option value="q1">What is your favorite Pokemon?</option>
<option value="q2">What is your favorite book?</option>
<option value="q3">What is your city of birth?</option>
</select>
<br><br>
<label for="answer">Security question answer:</label>
<input type="text" id="answer" name="answer">
Inputs of type "text" start out with a value of "" (empty string) by default (unless you set a different default with the defaultValue attribute), and then the value is whatever the user types.
You can set the value attribute your code to pre-fill the input, but it's generally not necessary. (You can also add a placeholder, which shouldn't affect the value, and disappears when the user starts typing into that input since it only shows up when input is empty (value = "").
And yes, the name attribute is the main requirement for submitting to server. Inputs generally have a default value. Even for drop-downs, default value is usually the first option ("q1" in your case), unless the selected attribute is added to one of the other options.
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.
I am creating a dropdown with AngularJS.
here is the code..
<div class="col-md-9">
<input type="text" placeholder="Enter Module" list="names"
ng-model="data.Name" />
<select id="names" class="form-control" ng-model="data.Name"
ng-change="SetCategory(data.Name)" name="name">
<option value='' disabled selected>------------- select an option ----------</option>
<option ng-repeat="e in BrData | filter:data.Name "
value="{{e.Name}}">{{e.Price}}</option>
</select>
</div>
NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag.
But Input tag can't nested in select tag.What should I do?
You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead
Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
The way I see it, there are three options here.
Option One - Input outside the dropdown
Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.
Option Two - Use some kind of third party dropdown library
As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too
Option three - Create something of your own
It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.
Dealing with the <select> nightmare
From the Docs:
<select> Element Technical summary1
Permitted content: Zero or more <option> or <optgroup> elements.
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: any element that accepts phrasing content
The short answer is that <input> elements can not be placed inside <select> elements.
<datalist> Element2
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
HTML combo box with option to type an entry
MDN Learn HTML Forms - Dealing with the select nightmare
Use select2 as a dynamic option instead of HTML select option:
here is link for select using js:
https://select2.org/tagging
What's the purpose of the label attribute in the <option> tag in HTML5?
All the spec has to say is:
Specifies a label for the option.
MDN provides an explanation I cannot understand:
This attribute is text for the label indicating the meaning of the
option. If the label attribute isn't defined, its value is that of the
element text content.
Usage note: the label attribute is designed to contain a short label
typically used in a hierarchical menu. The value attribute describes a
longer label designed to be used near a radio button, for example.
I wrote a simple case I thought that could shed some light:
<select name="country">
<option value="ES" label="Spain's label">Spain</option>
<option value="FR" label="France's label">France</option>
</select>
... and only found that browsers seem to:
Ignore it (Firefox 26)
Completely replace tag content with it (Explorer 11, Chrome 32, Opera 12)
What is the attribute meant for?
Note: original question assumed the attribute was new. That's incorrect. It's only been enhanced due to newer tags introduced in HTML5.
In practice, it is meant for use inside a datalist element. The idea is that when browsers that do not support this element encounter it, they render its content, by normal principles, and if you want that fallback content to be empty, you need to use elements with empty content there. The label attribute lets you specify a human-readable string for an option, and modern browsers still implement the datalist with option elements properly.
Consider the following example in HTML5 CR:
<label>
Sex:
<input name=sex list=sexes>
<datalist id=sexes>
<option value="Female">
<option value="Male">
</datalist>
</label>
It is implemented so that there is just the text box, but if you type “f” there, the modern browsers suggest “Female”. (There is differences in details here, but that’s not relevant to the question.) Here you don’t need the label attribute.
But if you wanted to have values like 2 and 1 (the ISO/IEC 5218 standard codes for sexes) in the submitted form data, instead of strings “Female” and “Male”, what would you do? Inside a select element you could use <option value=2>Female</option>, but inside a datalist, that would result in the string “Female” being displayed by old browsers, and that would look odd.
Using the label attribute, you can write the datalist element as follows:
<datalist id=sexes>
<option value="2" label="Female">
<option value="1" label="Male">
</datalist>
This is meant to use human-readable words in the user interface and to submit the coded value 2 or 1 as part of form data. In practice, it does not work quite that well. The browser also has to show the coded value, since that’s what will appear in the textbox when the user selects a suggestion made by a browser. Different browsers have solved this in different ways, all with some drawbacks. E.g., on IE, focusing on the text box opens a menu with the alternatives “Female” and “Male”, which is fine, but then, if you click on “Female”, the menu closes and the character “2” appears in the box. It is difficult to say how browsers should deal with this. Anyway, this is where the label attribute is meant to be used.
Looking at this: http://blog.paciellogroup.com/2012/08/notes-on-html5-accessibility-support-in-ie-10/
It's looks like it's more used when you define a separate <datalist> for use as a list for an input.
My other thoughts are around usage for screen readers, however, I can't find any evidence of that.
Remember that <option> isn't limited to use in a <select> element, therefore some properties are more useful when included as part of <optgroup> et al.
Hope this helps.
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