Accessible Select List Read all Options - javascript

HTML5: I have a multi-select list that I need to make accessible. Since it's a native control, it works fine. The problem is that they want the assistive technology to read all of the options when the page is loaded. So far, I have not found a way to make it read them. If they select an option, it will read the text and say option "xx" out of "xx", but it is not enough. Has anyone found a way to make assistive technology read the options upon loading the page? This customer is mainly using JAWS to help navigate the pages.
Here is the test html that I've been playing around with so far.
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

As long as you use a native control, you should not reprogram its normal behaviour. That's common accessibility.
You could perfectly add a label or an aria-label listing all the choices:
<label for="testing">
Choose one or more elements in the list: One two three four
</label>
<select id="testing" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>

Related

JQuery - Country code with fully customization

<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
I'm trying to create a country phone code drop-down with customization.
Here I'm trying to use jquery-nice-select plugin. What I want to know is, is it possible to create country phone code selector using jquery-nice-select plugin? I didn't get a way for that, so can you guys can help me? I have attached my HTML code above.
https://hernansartorio.com/jquery-nice-select/

how to prevent conflict beetween two jquery plugin

I have two jquery plugin
Image Picker link and select2 link
when i use the both of this plugin one of them is cannot run
here is my code
jquery code
$(".select2").select2();
$(".imagepicker").imagepicker();
select menu for select2
<select class="select2">
<option value="1">One</option>
<option value="2">Two</option>
</select>
select menu for imagepicker
<select class="imagepicker">
<option data-img-src="img/01.png" value="1"> Page 1 </option>
<option data-img-src="img/02.png" value="2"> Page 2 </option>
<option data-img-src="img/03.png" value="3"> Page 3 </option>
</select>
I don't know what is happening, but when I use the both of this plugin one of them is not working, maybe because in same select tag?
I am sorry my english is bad
The thumb rule is that your last plugin loaded would overrun the previous segment.

Make an option of jQuery ComboBox not selectable

just like the title says...I have a combobox, whose options are filled with web service call, activated on the click event.
I need to handle that list and make an option of that list (just the one whose value starts with "-" not selectable).
The "-" works a separator between one option group and the second following one.
So let's say I have this combo:
<select id="authority" class="selectauthority" style="width: 300px;" onclick="DisableSpecificOption()" name="authority">
<option value=""> </option>
<option value="001">Federal Bureau </option>
<option value="003">Police </option>
<option value="-1">-</option>
<option value="004">Army </option>
<option value="018">Navy </option>
<option value="018">CIA </option>
<option value="018">NSA </option>
</select>
As far as I know make the option disabled should be enough...I tried several scripts but I wasn't able to obtain my goal.
My Fiddle
Thank you in advance
edit
Since I have to use it in more than one selector and function I wrote a general one.
Updated Fiddle
Hope it helps somebody
Try
$('#authority option[value="-1"]').attr("disabled","disabled")
or
$('#name option:contains("-")').attr("disabled","disabled")

Tiered selection of location

First of all, what I am trying to do is allow the user to narrow down their location using a database of countries, counties, towns and cities.
It's too much to show them every city in one go so I want them to narrow down their filter.
Ebay does this with their categories:
I was going to implement it something like this:
http://jsfiddle.net/z8qbn6zw/3/
<select>
<option selected disabled>Choose country</option>
<option value="volvo">England</option>
<option value="saab">Wales</option>
<option value="mercedes">Ireland</option>
<option value="audi">Scotland</option>
</select>
<select class="hidden">
<option selected disabled>Choose State</option>
<option value="volvo">Avon</option>
<option value="volvo">London</option>
<option value="saab">Kent</option>
</select>
<select class="hidden">
<option selected disabled>Choose City</option>
<option value="volvo">Town A</option>
<option value="saab">Town B</option>
<option value="mercedes">Town C</option>
<option value="audi">Town D</option>
</select>
I'm a bit stuck because this is going to be part of a larger form, and sometimes the user will not have javascript enabled.
Question 1: What HTML markup is the best way to approach this, should I be using selects, or instead have each item as a submit button with that location value.
Question 2: How should I approach the fact that the user may not have javascript enabled and that this will be part of a much larger form.
Any input and advice from someone who has attempted this before would be appreciated.
If you need this to work without javascript, you can do it like this:
<input type="radio" name="rgroup" id="sel1">Selection 1</input>
...
<div id="cont1" class="container">
<input type="radio">Something 1</input>
...
</div>
CSS:
.container {
display: none;
}
#sel1:checked ~ #cont1 {
display: block;
}
...
Fiddle
If you use <select> and <option>, you can't do this because the <option>s cannot select the <div>s which would have to be outside the <select>.

Changing Custom Menu in JQuery Mobile

I'm working with JQuery mobile. I am building a form that includes the following code:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Unspecified</option>
<option value="-1">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
A custom menu is shown here. Right now, when someone clicks the drop down, a dialog appears with multiple options. The dialog title says "Unspecified". I know it says this because "Unspecified" is the first option. What I want is, the drop down to default to "Unspecified" and the dialog title to say "Please choose...".
I can't seem to figure out how to do this? I don't see any properties that you can set to accomplish this. Then I thought about listening for the "tap" event, but I couldn't seem to get that to work either.
Try This:
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please choose...</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>
Does something like this work?
<label for="genderDropDownList">Gender</label>
<select name="genderDropDownList" id="genderDropDownList" data-native-menu="false">
<option>Please Choose</option>
<option value="-1" selected="selected">Unspecified</option>
<option value="0">Male</option>
<option value="1">Female</option>
</select>

Categories

Resources