I want to create an checkbox group like so:
How do I make sure this is set up in the right way for it to be fully accessible?
I have something like this at the moment:
<div role="group" aria-labelledby="group_head" aria-describedby="group__description">
<h1 id="group_head">Heading 1</h1>
<div class="group__description">Descriptive text about this checkbox group</div>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_1" aria-describedby="description_2">
<label for="checkbox_1">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_1">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</div>
Or on jsfiddle
That already looks pretty good. Grouping has the advantage that it’s accessible name only gets announced once when the user enters the group.
It’s description (aria-describedby) is not part of the accessible name, so it won’t get announced by screen readers when the user navigates to the first checkbox (by means of tab).
If the group’s description is an indication important to the user’s choice, it shouldn’t be an optionally read description, but in the name. My suggestion would then be to group both texts together in a semantically correct <fieldset> and <legend>.
This will no longer respect the users verbosity setting and simply always announce that indication once the group is entered.
Alternatively, you might want to add the description’s ID to the group’s Labels: <div role="group" aria-labelledby="group_head group__description">.
<fieldset>
<legend>
<h1>Heading 1</h1>
<p>Descriptive text about this checkbox group</p>
</legend>
<ul>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_1" aria-describedby="description_1">
<label for="checkbox_1">Checkbox 1</label>
<p id="description_1">This is the descriptive text explaining the checkbox 1</p>
</li>
<li>
<input type="checkbox" name="checkbox_2" id="checkbox_2" aria-describedby="description_2">
<label for="checkbox_2">Checkbox 2</label>
<p id="description_2">This is the descriptive text explaining the checkbox 2</p>
</li>
<li>
<input type="checkbox" name="checkbox_1" id="checkbox_3" aria-describedby="description_3">
<label for="checkbox_3">Checkbox 3</label>
<p id="description_1">This is the descriptive text explaining the checkbox 3</p>
</li>
</ul>
</fieldset>
Related
I have two html sheets, one in Spanish and one in English, and I want to put a bootstrap toggle switch so that every time I click I am redirected to a different sheet
<li>
<a href="secciones/index-esp.html">
ESP
</a>
<div class="form-check form-switch">
<input type="checkbox" id="flexSwitchCheckDefault">
</div>
<a href="secciones/index-esp.html">
ENG
</a>
</li>
I was looking how a bootstrap form looks like, And I saw something that looks pretty much like this:
<div class="form-group">
<label for="inputA">Some Input:</label>
<input type="text" name="Input" id="inputA" class="form-control">
</div>
And it's really bothers me to do the for attribute every time. so, my question is, Is it possible to do somethig like this?:
<label class="form-group">
<span>Some Input:</span>
<input type="text" name="Input" id="inputA" class="form-control">
</label>
And is there any possible issues working this way?
The for simply toggles the control for the form input. Essentially, when you click the label, the form element is focused upon, or selected, depending on what type of form element it is. You do not have to include the for on each label; however, this is just common practice. I would not swap the label for a span though, I would simply do this...
<div class="form-group">
<label class="col-sm-2 control-label">Your Label</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="foo">
</div>
</div>
See this plnkr http://plnkr.co/edit/WZHMuYY3y2wbI6UysvY6?p=preview
When using a ng-form tag on an ng-repeat which contains a radio button group, the radio buttons are linked so if you check a radio button in one ng-repeat it will deselect in all the other ng-repeats. This puzzles me as the model of the ng-repeat is otherwise isolated from the other items. This is not only an issue when using ng-repeat. It also occurs when having multiple instances of a custom directive with isolated scope which renders a
<div ng-form name="myForm">
In the Plnkkr try adding a number of items and check the radio buttons on some of the items.
They should be independent, but they are not.
Is this a bug in Angular?
If not why does it work this way and how can I work around it?
<form name="mainForm" ng-submit="submitAll()">
<ul>
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" name="myRadio" value="r1" ng-model="item.radio" /> r1
<input type="radio" name="myRadio" value="r2" ng-model="item.radio" /> r2
<span ng-show="subForm.name.$error.required">required</span>
<button type="button" ng-disabled="subForm.$invalid" ng-click="submitOne(item)">Submit One</button>
</li>
</ul>
<button type="submit" ng-disabled="mainForm.$invalid">Submit All</button>
</form>
Those radio buttons are "connected" by a browser since you are giving them the same name. Just drop the name attribute and things start to work as expected:
http://plnkr.co/edit/AEtGstSBV6oydtvds52Y?p=preview
As per your last comment, I have tried this out and it works. I'm not using the built-in angular validation but I believe it works all the same and is very simple
<li ng-repeat="item in items" ng-form="subForm">
<input type="text" required name="name" ng-model="item.name"/>
<input type="radio" value="r1" ng-model="item.radio" /> r1
<input type="radio" value="r2" ng-model="item.radio" /> r2
<span ng-show="item.radio==''">required</span>
<button type="button" ng-disabled="subForm.$invalid || item.radio==''" ng-click="submitOne(item) ">Submit One</button>
</li>
See my working example at http://wiredbeast.com/coolframework/stackover.html
The trick is using ng-show="item.radio==''" to show the validation error and to disable the "Submit One" button.
In my honest opinion angular form validation and browser validation with checkboxes and radios is not very solid.
I want to use html input elements in twitter bootstrap. I have a label on the left and an input element on the right. I pretty much used the example given in the bootstrap documentation. But my problem is that I don't have IDs for every input element and so I can't specify the "for"-value of the labels.
My solution in previous projects was wrapping the input element with a label, but this results in a wrong styling when I use bootstrap.
<div class="control-group">
<label class="control-label">MyTitle:
<div class="controls">
<input type="text" value="..." />
</div>
</label>
</div>
Will this work for you?
<div class="control-group">
<div class="controls">
<label class="control-label">MyTitle:
<input type="text" value="..." />
</label>
</div>
</div>
I'm doing this HTML5 form, but when I check it on the browser (running it locally) it displays the label next to the input space next to le label and so.
heres the code:
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" placeholder="Ingresa tu Nombre" required />
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Ingresa tu e-mail " required />
<label for="message">Mensage:</label>
<textarea id="message" placeholder="Ingresa tu Mensaje" required></textarea>
<input type="submit" value="Envia tu mensage" >
</form>
should I use <br />? I already checked on other web pages and they dont use it
thank you.
As Kolink pointed out, the form displays inline as all the elements inside it are inline.
You shouldn't be using <br/> or <p> as they are not intended for that purpose (You shouldn't be using a toothbrush to clean a toilet). Better use a <ul> with <li> for each field. This makes sense as the form is nothing but a list of fields.
The mark-up would be like this:
<form>
<ul>
<li>
<label for="something">some label</label>
<input id="something" />
</li>
</ul>
</form>
Alternatively, you can go ahead and use <div> as well (but not <p>).
Well, <label> is inline, <input> is inline, <textarea> is inline...
If all your elements are inline, of course your overall form will be.
Try using the <br /> tag, or maybe <p>...</p>.
Kolink is correct. Another way to address this is to add
display: block;
to all input and label elements using CSS.