I am trying to ensure that our forms are accessible.
Looking at the W3C documentation for Radio Groups, oddly their example does not even use input type="radio". I don't understand that at all. I have used the code below in my app, and it would appear that Voiceover reads the form correctly. Am I correct? And why would they you div tags and a lot of JS instead of simple HTML form controls?
<div role="radiogroup"
aria-labelledby="stackedRadioGroup">
<p class="radio-group-label"
id="stackedRadioGroup">Stacked Radio Group Label</p>
<div class="form-check">
<input class="form-check-input"
type="radio"
role="radio"
name="stackedRadiosExample"
id="stackedRadiosExample1"
value="option1"
checked>
<label class="form-check-label"
for="stackedRadiosExample1">
Radio 1
</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="radio"
role="radio"
name="stackedRadiosExample"
id="stackedRadiosExample2"
value="option2">
<label class="form-check-label"
for="stackedRadiosExample2">
Radio 2
</label>
</div>
<div class="form-check">
<input class="form-check-input"
type="radio"
role="radio"
name="stackedRadiosExample"
id="stackedRadiosExample3"
value="option3"
disabled>
<label class="form-check-label"
for="stackedRadiosExample3">
Radio 3 (Disabled)
</label>
</div>
</div>
You can use native input[type='radio'] elements but you will still have to have a role='radiogroup' element to group the different items (a fieldset for instance)
Some people do not use native elements in order to implement custom designs easily.
Related
can somelone explain why i can't unselect or select multiple times my radio button input ? Here is my code:
<div id="grade">
<label id="gradeName">Grade</label>
<input type="radio">
<label for="">5</label>
<input type="radio">
<label for="">6</label>
<input type="radio">
<label for="">7</label>
<input type="radio">
<label for="">8</label>
<input type="radio">
<label for="">9</label>
<input type="radio">
<label for="">10</label>
</div>
For example if i want to unselect the value i can't, can this be fixed in html or i need js for this ?
Radio buttons are designed so that at all times one member of the radio group is selected.
You have not checked one by default, so none start out in the checked state.
You have not given them names so they aren't grouped (each is in a group consisting of just itself).
An an aside, a label is for labelling a single form control. You can't use a label to label an entire radio button group. That is what the fieldset element is for.
<fieldset>
<legend>Radio Example</legend>
<label><input type="radio" name="groupName" value="1" checked> 1</label>
<label><input type="radio" name="groupName" value="2"> 2</label>
<label><input type="radio" name="groupName" value="3"> 3</label>
</fieldset>
If you want each button to have two states, so you can check and uncheck them freely, use checkboxes:
<fieldset>
<legend>Checkbox Example</legend>
<label><input type="checkbox" name="groupName" value="1" checked> 1</label>
<label><input type="checkbox" name="groupName" value="2"> 2</label>
<label><input type="checkbox" name="groupName" value="3"> 3</label>
</fieldset>
Your approach is not right. By reading https://en.wikipedia.org/wiki/Radio_button you can understand that the purpose of the radio button is to choose only one value from a list of items. If you want to have the check/uncheck behavior you should use checkboxes and apply styles to look like radio buttons.
I am trying to create a satisfaction survey using the radio buttons, but not sure if my syntax are correct. This is what I did:
From what I understand, the one I am reading says each radio button should have a label, but in this case, there is no label for each radio button, because I want to align them under "Poor," "Good," "Better," and "Super."
This is how I did one of them:
<div class="radio_menu">
<p>Menu selection</p>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
</div>
Is this correct?
The radio buttons do need labels to be accessible. However, they don't need to be visible if the form makes sense to sighted users without them. You can use <span> elements with a "screen-reader only" class within the <label> elements to visually hide text meant for screen readers and other assistive technologies.
Also, consider using <fieldset> and <legend> elements to group form fields.
This could look like:
<fieldset class="radio_menu">
<legend>Menu selection</legend>
<label>
<input type="radio" id="menu_selection_poor" name="menu_selection" value="poor">
<span class="sr-only">Poor</span>
</label>
<label>
<input type="radio" id="menu_selection_good" name="menu_selection" value="good">
<span class="sr-only">Good</span>
</label>
<label>
<input type="radio" id="menu_selection_better" name="menu_selection" value="better">
<span class="sr-only">Better</span>
</label>
<label>
<input type="radio" id="menu_selection_super" name="menu_selection" value="super">
<span class="sr-only">Super</span>
</label>
</fieldset>
I have the following layout:
When the screen size is changed I want the text field to stay always 'attached' to the last radio button having 1em distance between them. The problem is that the radio button group is one div and the text field is another. Is there a way of specifying css rules on the text field only to achieve such positioning? If not, what could be done otherwise? I am using semantic-ui-react and due to the nature of the project structure can only position the radio button group and the textfield in two different Form.Groups'.
You can use display the flex property for this design. It will always align at the bottom from the last radio button. You just need to add to lines in CSS. Here is the pen: https://codepen.io/Mak0619/pen/bPYXyg
HTML:
<div class="radio-button-grop">
<div class="bd-example">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="">
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="">
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
<div class="text-field">
<input type="text">
</div>
</div>
CSS:
.radio-button-grop{
display: flex;
align-items: flex-end;
}
.text-field{
margin-left: 1em;
}
I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.