It seems simple, but this has been a bit of a headscratcher for me. Given the following (valid xhtml transitional) code:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test" value="5" />
</form>
Why is it that I can't tab between radio buttons? This issue seems to be because they all have the same name attribute, but that seems rather counter-intuitive to me as far as accesbility goes. Why does the focus state only get applied to one? Is this because the group is treated as a single element? Are access keys the only non-Javascript solution here?
You actually use the arrow keys to move within the radio buttons because as you said, they are treated as a single element. This is normal behavior.
As James and Tatu said that is normal, I don't know if you have used "TABINDEX", it might work.
<input type="radio" id="test5" name="test" value="5" tabindex="5" />
But as they are treated as single element it might not work.
Yes, each radio button group is treated as one form element - if you want to skip between the group elements then use the arrow keys. It does make sense; if you're tabbing through a long form with a group of 10 radio buttons halfway down, you'd get annoyed if you had to tab through all 10 radio options before moving to the next form item.
If they're not in the same group, then you can tab between them. In the example below, T5 will gain separate tab focus to the rest:
<form action="weird.html">
<label for="test1">T1</label>
<input type="radio" id="test1" name="test" value="1" />
<label for="test2">T2</label>
<input type="radio" id="test2" name="test" value="2" />
<label for="test3">T3</label>
<input type="radio" id="test3" name="test" value="3" />
<label for="test4">T4</label>
<input type="radio" id="test4" name="test" value="4" />
<label for="test5">T5</label>
<input type="radio" id="test5" name="test2" value="5" />
</form>
Related
I have a set of radio buttons in the format below. I'm using a legend and a fieldset to group the radio buttons and give the set a label. I'm styling the input to be hidden, and then styling the label to look more like a button.
My Question:
If I want to add more context for one of the buttons, what is the most accessibility friendly way of doing that? I was thinking about adding a title attribute to the label of "Vote '?' if you wish to abstain". I don't mind this appearing in a tooltip, so title seems work fine, I'm just not sure how it is handled by screen readers.
<fieldset>
<legend>Votes</legend>
<label>
<input type="radio" class="hidden" value="0" /> ?
</label>
<label>
<input type="radio" class="hidden" value="1" /> 1
</label>
<label>
<input type="radio" class="hidden" value="2" /> 2
</label>
<label>
<input type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
You can Edit Like below:
<fieldset>
<legend>Votes</legend>
<label title="0">
<input name="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label title="1">
<input name="r1" type="radio" class="hidden" value="1" /> 1
</label>
<label title="2">
<input name="r1" type="radio" class="hidden" value="2" /> 2
</label>
<label title="3">
<input name="r1" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Following a common practice, similar to how bootstrap uses its screen reader-only helper (.sr-only), you could use CSS to offset the text within the label so that it is hidden to the visual user and only visible to the screen reader.
Using the title attribute on the label you will be relying on the specific user's AT usage of the label title attribute.
<label for="ir1">
<input id="ir1" name="r1" type="radio" class="hidden" value="0" />
visual text
<span class="sr-only">additional screen reader only text</span>
</label>
https://getbootstrap.com/docs/3.3/css/#helper-classes-screen-readers
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Some screen reader + browser combinations don't honor "implicit" labels (input fields nested in a label) because they don't associate the label with their respective (nested) input element. That's a bug on their end but is something you should try to avoid. So the first thing I would do is add the for attribute to all the <label> elements.
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" class="hidden" value="3" /> 3
</label>
</fieldset>
Note, your original code did not have a name attribute for each <input> so the radio buttons were not programatically grouped together. I added name="myradio" to each one. I also added an ID to each <input> and now each <label> points to each <input> via its for attribute.
One possible way to add additional text to each label is to use visually hidden text that is still available to screen readers. #jcruz mentioned that and it's one possibility. It's a pretty common technique.
Another solution, and possibly a little simpler than hidden text, is to have an aria-label attribute on each <input>. The aria-label is not visible. It's there solely for the screen reader. The aria-label will override anything in the <label>. But one caution when having both visible text and an aria-label, the aria-label must contain the same text as in the visual label, plus it can have additional text. This is a new WCAG 2.1 guideline and is called "2.5.3 Label in Name". So you can visually have "2" as the <label> but the aria-label could be "vote two times to get your candidate in office". In this case, whether you have "two" or "2" in the label doesn't matter. A speech interface user can say "click two" and the correct radio button will be selected.
(Note that with a braille device, there is a difference. One would show the word "two" and the other would show the number "2", but again, in this case it might not matter.)
<fieldset>
<legend>Votes</legend>
<label for="r1">
<input name="myradio" id="r1" type="radio" aria-label="Not sure who to vote for? Abstain" class="hidden" value="0" /> ?
</label>
<label for="r2">
<input name="myradio" id="r2" type="radio" aria-label="Vote one time to be honest" class="hidden" value="1" /> 1
</label>
<label for="r3">
<input name="myradio" id="r3" type="radio" aria-label="Vote two times to get your candidate in office" class="hidden" value="2" /> 2
</label>
<label for="r4">
<input name="myradio" id="r4" type="radio" aria-label="Vote three times if you're really passionate" class="hidden" value="3" /> 3
</label>
</fieldset>
Note that you might have a special case that I didn't test with speech recognition software. As mentioned, the aria-label needs to contain the visible text from the label. With your first radio, it's a question mark. I'm not sure if speech recognition will expect "click question mark", and if the "?" in the aria-label will match.
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
I have something like above code. When users click the label it should toggle the input and focus on it. It works everywhere but on a popup page. Since this functionality comes with html I have no idea what is happening. I really appreciate if some one can give me a hint. I am investigating my pop up page.
Thanks
Any chance you use that id mutiple times on your page?
Also in your case I would just do:
<form>
<label>Male <input type="radio" name="sex" id="male" /></label>
<br />
<label>Female <input type="radio" name="sex" id="female" /></label>
</form>
I had a set of radio buttons that were inline. I have since converted them to jQuery UI buttons with this line of code:
$("input:radio").button();
Now, they are all looking nice, but they are still aligned to the left. I can't fix this problem. I tried even using <center>, and everything in between, but it didn't center it as I wanted.
Here's the HTML:
<div style="display: <?php echo $visible; ?>;">
<form action="php/ratingsPost.php" method="POST" id="ratingsPost">
<input type="radio" class="radio" name="rate" value="1" id="1" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="1">1</label>
<input type="radio" class="radio" name="rate" value="2" id="2" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="2">2</label>
<input type="radio" class="radio" name="rate" value="3" id="3" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="3">3</label>
<input type="radio" class="radio" name="rate" value="4" id="4" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="4">4</label>
<input type="radio" class="radio" name="rate" value="5" id="5" onChange="javascript:$('#ratingsPost').submit()"/>
<label for="5">5</label>
</form>
</div>
Any help?
According with documentation (last tab), you can specify a different theme for your JQueryUI components.
The whole radio buttons should be similar to this:
<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
<span class="ui-button-text">Button Label</span>
</button>
All what you need is overwrite classes for your own design using personal CSS stylesheet. For example:
.ui-button .ui-button-text{
// personal style
}
Anyways, a little code using JSBin or JSFiddle as JohnP said could be nice to get a better view of your problem. Happy codding!
From what I have gathered, in order to make a label of a radio button clickable, you must assign the same "name" attribute value to both elements.
The problem I am having is when you have more than one radio button, say a "yes or no" type selection. In order to make it to where if you click one, the other disables is that both radio buttons "name" attribute has to be the same value.
Is it possible to do both?
<label for="no">No</label>
<input type="radio" name="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="yes" value="yes" />
id (not name) attribute should be referred by label's for attribute. It should be like this: http://jsfiddle.net/zzsSw/
<label for="no">No</label>
<input type="radio" name="mygroup" id="no" value="no" />
<label for="yes">Yes</label>
<input type="radio" name="mygroup" id="yes" value="yes" />
You can also write labels without IDs:
<label>
<input type="radio" name="mygroup" />
My clickable caption
</label>
or checkbox
<label>
<input type="checkbox" name="mygroup[]" />
My clickable caption
</label>