i have the following situation:
i have made hidden checkboxes and labels which are clickable.
when testing in browsers all works like a charm, but on ipad the label only take the click, when i am not hitting any text, which is in the label.
why is that so?
here my markup of one box:
<input name="Quantify-Studienzusammenfassung" value="no" type="hidden" />
<input class="chk_button" name="Quantify-Studienzusammenfassung" id="chk_quantify_studien" type="checkbox" value="yes" />
<label for="chk_quantify_studien">
<div class="label_div">
<h3>Quantify-Studienzusammenfassung:</h3>
<p>Kurzatmigkeit vs. Tiotropium/Formoterol (in freier Kombination)</p>
</div>
</label>
Hi Please try it me be it's work
.chk_button{
float:left;
}
label{
float:left;
width:100%;
}
<input name="Quantify-Studienzusammenfassung" value="no" type="hidden" />
<input class="chk_button" name="Quantify-Studienzusammenfassung" id="chk_quantify_studien" type="checkbox" value="yes" />
<label for="chk_quantify_studien">
<div class="label_div">
<h3>Quantify-Studienzusammenfassung:</h3>
<p>Kurzatmigkeit vs. Tiotropium/Formoterol (in freier Kombination)</p>
</div>
</label>
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.
Trying to create alternating background colors for my check box sections in my Jquery mobile site but the colors are just staying white... Tried a couple things and none worked the way I wanted.
<fieldset data-role="controlgroup" style="width:90%;">
<div class="OddBox"><input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label></div>
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
<label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
And my css
.OddBox{
background-color: rgba(204,204,204,1);
}
I tried using a div wrapper and adding the style right to the input line of code. When I style the label it ands up just changing the color behind the text.
Any help would be greatly appreciated.
First change your HTML so your input and labels are in the same row. Like this:
<fieldset data-role="controlgroup" style="width:90%;">
<div class="OddBox">
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="" />
<label for="checkbox1_0" style="color:rgba(4,96,46,1)">Call the Police Immediatly to report the accident and notify them of any medical assistence needed.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1" style="color:rgba(4,96,46,1)">Turn on your 4-way flashers to warn other drivers.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom, OddBox" value="" />
<label for="checkbox1_2" style="color:rgba(4,96,46,1)">Do not claim fault or responsibility.</label>
</div>
<div class="form_row">
<input type="checkbox" name="checkbox1" id="checkbox1_3" class="custom" value="" />
<label for="checkbox1_3" style="color:rgba(4,96,46,1)">Remain calm and courteous.</label>
</div>
</div>
Now you can simply target that div as you want. In your case, something like this:
.form_row:nth-child(odd) {
background-color: rgba(204, 204, 204, 1)
}
I forgot: here's a fiddle for you to preview and play around:
I don't think you can do this..
you did prob do this with shifting background position and hiding the actual check box
or use the :before and :after to add contents and style to replace the check box see this for example
http://cssdeck.com/labs/css-checkbox-styles
I have a set of radio buttons inside a div which has a fixed height and overflow:hidden. Some of the radios get hidden because they would be naturally positioned outside the height of the containing div.
When a radio is selected, and that radio is outside the visible part of the div, the div gets scrolled.
What I want is to be able to lock the scrolling of the div, regardless the currently checked radio is visible or not. I don't want the div to scroll.
Instructions to reproduce:
In FF/IE:
Click on a radio button
Use up/down arrows
Here is the code: http://www.jsfiddle.net/kANKu/1/
<div style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" /><label for="hello9">hello9</label> <br />
</div>
This is indeed a very strange request you have here. I have absolutely no idea what you are trying to accomplish here. However here is your Solution:
Firefox scrolls the selected item into view, thats just a a build in behaviour. There is no specification or magic attribute for that or something.
However you can do a little hack which i did in the example below:
You could play around with onkeydown events or onfocus and reset the scrol in javascript but that would be nonsense.
Just place the elements that you don't want to get scrolled to inside the visible area. I did it on the top right.
Then make it visibility:hidden et voilá.
It will be selected on arrow down and the value etc will still be submittet (i tried it with wrapping an missing form tag around the whole thing and a submit button).
This is very ugly and in my understanding absolutely weird and stupid, but as I said i don't know what your goals are!
Here comes your updated code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
#strangediv {
position: relative;
}
#strangediv input.invisible {
top: 0px;
left: 0px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
Try this in FF/IE
<div id="strangediv" style="width:200px; height:100px; border: solid 1px red; margin:0 auto;overflow:hidden;">
<div id="holder">
<input type="radio" name="rad1" value="hello" id="hello1" /><label for="hello1">hello1</label> <br />
<input type="radio" name="rad1" value="hello" id="hello2" /><label for="hello2">hello2</label> <br />
<input type="radio" name="rad1" value="hello" id="hello3" /><label for="hello3">hello3</label> <br />
<input type="radio" name="rad1" value="hello" id="hello4" /><label for="hello4">hello4</label> <br />
<input type="radio" name="rad1" value="hello" id="hello5" /><label for="hello5">hello5</label> <br />
<input type="radio" name="rad1" value="hello" id="hello6" class="invisible" /><label for="hello6">hello6</label> <br />
<input type="radio" name="rad1" value="hello" id="hello7" class="invisible" /><label for="hello7">hello7</label> <br />
<input type="radio" name="rad1" value="hello" id="hello8" class="invisible" /><label for="hello8">hello8</label> <br />
<input type="radio" name="rad1" value="hello" id="hello9" class="invisible" /><label for="hello9">hello9</label> <br />
</div>
</div>
</body>
</html>
I need the ability to place the labels for radio buttons above the selections, and not to the left or the right. Is there a way to use CSS that would give this effect?
THanks!
I think I know what you are looking for, but correct me if I'm missing the mark. I'm assuming you will want the radio buttons centered under their labels. This is a lot easier if you are okay with adding <br>s to your markup.
label {
float: left;
padding: 0 1em;
text-align: center;
}
<label for="myChoice1">Choice 1<br />
<input type="radio" id="myChoice1" name="myChoice" value="1" />
</label>
<label for="myChoice2">Choice ABC<br />
<input type="radio" id="myChoice2" name="myChoice" value="ABC" />
</label>
<label for="myChoice3">Choice qwerty<br />
<input type="radio" id="myChoice3" name="myChoice" value="qwerty" />
</label>
<label for="myChoice4">Choice--final<br />
<input type="radio" id="myChoice4" name="myChoice" value="final" />
</label>
...and then use your own clearing method to move to the next line.
(The use of the for attribute in the <label>s is a little redundant here, but it won't hurt anything.)
Instead of the following:
<label>Label <input type="radio" id="val" name="val" value="hello"></label>
You can use this and style the two separately:
<label for="val">Label</label>
<input type="radio" id="val" name="val" value="hello">
I can't be more specific without seeing exactly what layout you are going for, but if you just want to get the label above the radio button, use display:block on the radio button. (obviously, this is inline just as an example)
<label>Label <input style="display:block;" type="radio" id="val" name="val" value="hello" /></label>
So I know this isn't the answer you are looking for, but I would be confused to see that type of layout. It is not standard and it would put me off. Just my $.02.
Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?
<link href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet">
<link href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css" rel="stylesheet">
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="color" value="" id="SubmitQuestion" />
<input type="radio" name="color" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="color" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="color" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Also let me state that I use the yui css styles as base. If you are not familir with them, they can be found here:
reset-fonts-grids.css
base-min.css
Documentation for them both here : Yahoo! UI Library
#pkaeding: Thanks. I tried some floating both thing that just looked messed up. The styling active radio button seemed to be doable with some input[type=radio]:active nomination on a google search, but I didnt get it to work properly. So the question I guess is more: Is this possible on all of todays modern browsers, and if not, what is the minimal JS needed?
The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.
Getting the Label Near the Radio Button
I'm not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into float: territory):
Use <br />s to split the options apart and some CSS to vertically align them:
<style type='text/css'>
.input input
{
width: 20px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<br />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>
Follow A List Apart's article: Prettier Accessible Forms
Applying a Style to the Currently Selected Label + Radio Button
Styling the <label> is why you'll need to resort to Javascript. A library like jQuery
is perfect for this:
<style type='text/css'>
.input label.focused
{
background-color: #EEEEEE;
font-style: italic;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.input :radio').focus(updateSelectedStyle);
$('.input :radio').blur(updateSelectedStyle);
$('.input :radio').change(updateSelectedStyle);
})
function updateSelectedStyle() {
$('.input :radio').removeClass('focused').next().removeClass('focused');
$('.input :radio:checked').addClass('focused').next().addClass('focused');
}
</script>
The focus and blur hooks are needed to make this work in IE.
For any CSS3-enabled browser you can use an adjacent sibling selector for styling your labels
input:checked + label {
color: white;
}
MDN's browser compatibility table says essentially all of the current, popular browsers (Chrome, IE, Firefox, Safari), on both desktop and mobile, are compatible.
This will get your buttons and labels next to each other, at least. I believe the second part can't be done in css alone, and will need javascript. I found a page that might help you with that part as well, but I don't have time right now to try it out: http://www.webmasterworld.com/forum83/6942.htm
<style type="text/css">
.input input {
float: left;
}
.input label {
margin: 5px;
}
</style>
<div class="input radio">
<fieldset>
<legend>What color is the sky?</legend>
<input type="hidden" name="data[Submit][question]" value="" id="SubmitQuestion" />
<input type="radio" name="data[Submit][question]" id="SubmitQuestion1" value="1" />
<label for="SubmitQuestion1">A strange radient green.</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion2" value="2" />
<label for="SubmitQuestion2">A dark gloomy orange</label>
<input type="radio" name="data[Submit][question]" id="SubmitQuestion3" value="3" />
<label for="SubmitQuestion3">A perfect glittering blue</label>
</fieldset>
</div>