Is there a simple way to get jaws to read all the options for a select, currently we have
<div class="mySelectLabel">
<label for="mySelectId" class="mySelectLabel">
<span class="required" aria-hidden="true" role="presentation">*</span>
<span class="offScreenText">Mandatory</span>
<span class="labelText">Are you old enough?</span>
</label>
</div>
<div class="myDivClass">
<select id="mySelectId" name="mySelectName">
<option value="">Please Select...</option>
<option selected="selected" value="Y">Yes</option>
<option value="N">No</option>
</select>
</div>
Currently jaws reads ... Are you old enough? Combo box Yes the client wants it to read all the options.
I figure I could output hidden text for jaws to read but it would be nicer if there was an aria setting or something similar I could apply.
This is one of basic navigation rules with JAWS.
Actually JAWS should read:
Are you old enough? Combo box Yes
If a user hears that this is a combo box, he/she knows (at least, should know) that in order to navigate he/she must press the Enter key in order to turn on the forms mode (unless the automatic forms mode is turned on). When in forms mode, he/she reviews the combo box with his/her vertical arrow keys.
This is intended behavior, again, navigation with JAWS works like this.
What you can do if you are absolutely required to do such a thing is the following: put an aria-describedby attribute to your select and in the description (which is visually hidden, of course) put something like this: «Select from one of the following values: Yes, No» (sure, you can grab the values from the options array with some JavaScript).
Related
I have an HTML select form with several options in it. I want a default option of "(select an issue)", but I don't want that option to be submittable. I want the "Please fill out this field" message to show up if the user tries to submit with this option selected.
I've seen this many times on other sites, so I know it's possible, some way or another, but I'm not sure how to approach it.
This link: How do I make a placeholder for a 'select' box?, provided by Jasper Kent, helped me figure it out.
There was a solution to do the following:
<select>
<option value="" disabled selected>Select your option</option>
<option value="hurr">Durr</option>
</select>
This forces the option to have to be switched before submission, and the user cannot re-select that option either. It also makes it the default selection.
I am creating a dropdown with AngularJS.
here is the code..
<div class="col-md-9">
<input type="text" placeholder="Enter Module" list="names"
ng-model="data.Name" />
<select id="names" class="form-control" ng-model="data.Name"
ng-change="SetCategory(data.Name)" name="name">
<option value='' disabled selected>------------- select an option ----------</option>
<option ng-repeat="e in BrData | filter:data.Name "
value="{{e.Name}}">{{e.Price}}</option>
</select>
</div>
NOTE: List is Dynamic and i am using AngularJS to get data.
I need To create a searchbar inside select tag.
But Input tag can't nested in select tag.What should I do?
You can use typeahead from UI Bootstrap: https://angular-ui.github.io/bootstrap/#!#typeahead
Or if you need more advanced features along with search like multi-select, select all, deselect all, disable options, keyboard controls and much more try this: http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main
The way I see it, there are three options here.
Option One - Input outside the dropdown
Get the input outside the dropdown, and filter the values based on that value from the outside. I know that this is not your intended functionality exactly, but it would save you some trouble.
Option Two - Use some kind of third party dropdown library
As Mohd mentioned https://angular-ui.github.io/bootstrap/#!typeahead is a good fit and UI select too
Option three - Create something of your own
It need not even be using <select> tag. This is by far the most difficult, but also the most customizable and suitable for individual needs. The select tag will not be used as it does not support input inside of it, so some high end css will need to be used, as well as some backwards compatibility multiple browser testing that the already made libraries have already done.
Dealing with the <select> nightmare
From the Docs:
<select> Element Technical summary1
Permitted content: Zero or more <option> or <optgroup> elements.
Tag omission: None, both the starting and ending tag are mandatory.
Permitted parents: any element that accepts phrasing content
The short answer is that <input> elements can not be placed inside <select> elements.
<datalist> Element2
The datalist element is intended to provide a better mechanism for this concept.
<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
<option value="A">
<option value="B">
</datalist>
For more information, see
HTML combo box with option to type an entry
MDN Learn HTML Forms - Dealing with the select nightmare
Use select2 as a dynamic option instead of HTML select option:
here is link for select using js:
https://select2.org/tagging
We need to update our forms to be accessibility compliant. I am looking for information on how to write an inline error for a form select. I have the form field labeled and have an inline error, but the readers do not announce the error.
Here is what we are using
<div class="select-wrapper">
<label for="securityQuestion" class="control-label bolded">Security Question</label>
<select id="securityQuestion" name="securityQuestion" class="form-control" aria-describedby="securityQuestion_error">
<option value="0">Select a Question</option>
<option value="10">What is your mother's maiden name?</option>
<option value="9">What's your town of birth?</option>
<option value="11">What is your father's middle name?</option>
<option value="12">What street did you live on when you were 10 years old?</option>
</select>
<div class="clear form-error-msg" id="securityQuestion_error"><span class="shop-icon icon" aria-label="Attention">r</span><span id="error-msg-text">Please select a security hint question.</span></div>
</div>
So if the user doesn't select an option and submits we dynamically inject an error just after the form field as shown above. This works fine for inputs and text boxes, but for the select, the reader skips it.
I been reading different blogs and specs and have read many times, don't use selects, but use radios or text boxes instead.
So any ideas?
Your issue might be linked to the following bug:
JAWS does not announce aria-describedby on select box in IE
This is also described on WebAim mailing list.
This is a bug, you have multiple alternatives to avoid this bug :
including the error text in the label
ARIA21: Using Aria-Invalid to Indicate An Error Field
SCR18: Providing client-side validation and alert
Re-displaying a form with a summary of errors
Providing error notification as the user enters information
Including error notification information in the page title
For instance, you can use aria-labelledby to target both the label and the error text.
<div class="select-wrapper">
<div id="securityQuestion_label">Security Question</div>
<select id="securityQuestion" name="securityQuestion"
aria-labelledby="securityQuestion_label securityQuestion_error">
<option value="0">Select a Question</option>
<option value="10">What is your mother's maiden name?</option>
<option value="9">What's your town of birth?</option>
<option value="11">What is your father's middle name?</option>
<option value="12">What street did you live on when you were 10 years old?</option>
</select>
<div class="clear form-error-msg" id="securityQuestion_error">Error message</span></div>
</div>
Well, get got our answer. Selects are not consistently supported across screen readers/os/browser combinations. The code works correctly with Safari and voiceover. However, chrome and voice-over do not play nice 100%. Further testing, sadly using chrome vox with chrome doesn't even read text input inline errors.
After some research, we found this from WebAim :
Firefox works best with NVDA
Chrome & Internet Explorer with JAWS on Windows
Safari with VoiceOver
Edge with Narrator
I have a select that looks as follows:
<select id="select-full"
title="Make selection"
class="form-control form-custom input-sm"
name="Select"
ng-model="form.select"
ng-options="select.displayName as select.text for select in selects | orderBy:'text'">
<option value="">Any</option>
</select>
Some of the text populated by ng-options is very long, and so I plan to have the ones that would cause overflow to have trailing ellipses.
But I wanted to know if, additionally, there is a way to make it so that mousing over one of the options within the select to have a tooltip display the full entry? So that the user could inspect the full entry before making a choice. Whether it is in the HTML or angular controller doesn't matter.
If there isn't a way, that is a fine answer, but doing some searching hadn't yielded an answer as to whether exactly what I want to do here is doable.
Thanks!
You can use uib-tooltip as :
<span tooltip-append-to-body="true" uib-tooltip="{{select.displayName}}" tooltip-placement="right">{{select.displayName}}</span>
Here tooltip-append-to-body="true" will move your tooltip to parent scope so that it is not chopped off in selections div.
Learn more about it on Uib Angular
I have a basic form like so:
<form id="test-form">
<select id="multi" name="mymulti" multiple required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select><br>
<select id="single" name="myselect" required>
<option value="">Choose a different Option</option>
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select> <br>
<input type="submit">
</form>
The key point here is two selects, both required, but one is multiple and the other is not.
If you choose the default options (note you actually have to click on them), and then submit the form, it will tell you that the single select is required, but not the multiple select.
I looked at the relevant portion of the html5 spec, and although there is some talk about how the required select interacts with placeholder elements, I don't see anything about how multiple+required behaves.
The above behaviour is only in Chrome, other browsers seem to behave the same for both types. My question is, why? It seems... inconsistent. I understand how to work around it with some javascript, just not why I would have to? Can anyone explain the rationale behind this?
Demo (remember to actually choose the placeholder options).
Chrome is acting right here. While implementation in FF is simply simpel. But chrome's implementation does not only follow the spec, it is also simply logic. If a mutliple or size > 1 select is used, there is no placeholder by definition. And without a selected attribute there is indeed nothing :checked (i.e.: selected) initially.
In case of a single select with size=1. The select > option:first-child with an empty value is the placeholder option. And a single select has always one option :checked/selected.
Here is a definition of placeholder option in JS: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L88-94 and here a definition of valueMissing for select: https://github.com/aFarkas/webshim/blob/gh-pages/src/shims/form-shim-extend.js#L128-130