Is the attribute aria-labelledby needed on an <input> element that is nested inside a <label> element that serves as a label for <input>? Like below:
<label>This is an input field:
<input type="text" />
</label>
or do I need something like:
<label id="mylabel">This is an input field:
<input type="text" aria-labelledby="mylabel" />
</label>
I know that the for attribute is not needed on <label> if the target of for is nested, does the same principle apply to the ARIA attributes?
When <input> tag is present inside the <label> tag, you don't need to use aria-labelledby attribute.
But, if you are writing like this :
<div> Enter some text here:
<input type="text"/>
</div>
Then, you need to use aria-labelledby on <input> tag like this:
<div id="txt"> Enter some text here:
<input type="text" aria-labelledby="txt">
</div>
Related
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
I would like to know if I could insert a legend inside a header. This way the legend can have also its hierarchy related to the whole document.
I have more text below which is relevant but needs to be highlighted for the readers. In this case personal information would be legend and h2 at the same time. h1 would be another element in the site which I chose not to display.
<fieldset>
<h2>
<legend>Personal information</legend>
</h2>
<h3>
Credentials
</h3>
<label for="username">
Username
</label>
<input id="username" type="text">
<label for="surname">
Surname
</label>
<input id="surname" type="text">
<h3>
Contact details
</h3>
<label for="street">
Street
</label>
<input id="street" type="text">
<label for="house-number">
House number
</label>
<input id="house-number" type="number">
</fieldset>
As stated in https://developer.mozilla.org/it/docs/Web/HTML/Element/legend
Permitted parent elements: A <fieldset> whose first child is this <legend> element
In your example the <legend> element is not the first child of its ancestor <fieldset>, so it is not valid HTML5 markup.
Furthermore note that also reverting the order of the elements like so
<legend><h2>Personal information</h2></legend>
the markup would not be still valid, since <legend> allows phrasing content only
Element legend is not allowed as child of element h1.
Only as a child of a fieldset.
Quote from W3C validator -
Contexts in which element legend may be used:
As the first child of a fieldset element.
I know how to use label.
I know that the For attribute should have Id of the input.
Also I know there is another way to link the label to an input by wrapping it around the input like this:
<label>test <input type="text" /></label>
What I couldn't figure out is why in bootstrap,there is no Id for the textarea and the label tag is assigned to word "name" as follow:
<label for="name" > test </label>
<textarea class=form-control" rows="3" ></textarea >
Can I have two labels with the same for value? Example:
<label for="foo">Outer label</label>
<div class="foo-bar">
<input type="checkbox" id="foo" />
<label for="foo">Inner label</label>
</div>
The for attribute links a control to an input, there is, so far as I know, no limit to the number of elements that can link to one input, so long as the id of that input (or textarea, select, etc) is unique.
For example, in the following demo both label elements will trigger the change (check/uncheck) of the checkbox input element:
<label for="foo">Outer label</label>
<div class="foo-bar">
<input type="checkbox" type="checkbox" name="test" id="foo" />
<label for="foo">Inner label</label>
</div>
JS Fiddle demo.
This can be useful for adding error messages (post-validation, for example) that explicitly link to, or otherwise identify, the element in which there's an error, without overriding/replacing the pre-existing label for that element.
Unfortunately there is, so far as I've yet found, no reference or documentation that explicitly allows an input (or similar element) to linked to only one control; however MDN's entry for <label> does state that:
The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the for attribute is the labeled control for this label element.
What's the most appropriate, semantically correct way to label checkbox and radio elements? Obviously, giving each one a unique id attribute is an option and using that in id a <label for="">, but this seems like it would break the semantic grouping. Putting unenclosed text next to the input element just seems...wrong.
Edit:
Additionally, how should one denote the label for a group of such elements? (i.e. not the description of each option, but the description of the whole group)
Using <label for=""> is the correct way to do that. The grouping of radio buttons is done by denoting the group via the name attribute and individual elements via the id attribute. For example:
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
As for putting a label over the entire group, just put them in a container that has a text container above the stack of buttons (or checkboxes). Example:
<div>
<h3>My Radio Button Group</h3>
<input type="radio" name="rbg" id="rbg1"><label for="rbg1">Button One</label><br>
<input type="radio" name="rbg" id="rbg2"><label for="rbg2">Button Two</label><br>
<input type="radio" name="rbg" id="rbg3"><label for="rbg3">Button Three</label><br>
</div>
I mostly use Chris Coyiers HTML ipsum : http://html-ipsum.com/
always a good helper