I am trying to use aria-describedby on select box, but JAWS does not announce the text associated using the aria-describedby attribute in IE. I have even added tabindex="-1" to the span tag which is being referenced.Below is the sample code I am using. Can somebody please provide me any information on this topic.
<form action="#" method="post">
<div>
<label for="State">State</label>
<select id="State" name="State" aria-describedby="spanId">
<option value="acct">Choose</option>
<option value="act">ACT</option>
<option value="nsw">NSW</option>
<option value="nt">NT</option>
<option value="qld">QLD</option>
<option value="sa">SA</option>
<option value="tas">TAS</option>
<option value="vic">VIC</option>
<option value="wa">WA</option>
</select>
<span id="spanId" tabindex="-1">This is the text</span>
</div>
</form>
You can use aria-label="spanId"
Make sure you don't use title and aria-labelfor the same HTML element because title gets suppressed.
Using IE11 and Jaws 17 I have observed this issue as well.
My take is that this is a bug.
Until it's addressed by Freedom Scientific, I'd recommend using aria-labelledby.
This means something slightly different semantically:
a label describes the essence of an object, while a description
provides more information that the user might need.
Source: Mozilla Developer Network
But it's probably the best substitute you have available.
Related
I'm using the native input element with datalist, when I use the arrow key to pick the selection, the scrollbar didn't follow my focus.
How can I make it?
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
You did everything right. Since the <datalist> itself is a replaced element, there is not much that you can do.
This is a known bug in the Chrome browser: Issue 889960: HTML 5 Datalist does not scoll when using the keyboard , open since April. You should definitely express your interest in the issue over there.
I cannot decide the criticality of this issue for you, neither do I know whether you could help fix it upstream in the Chromium code base.
Additionally, the Chrome implementation seems to have more issues concerning accessibility of datalist: Issue 1130496: datalist is not accessible (zoom, focus visibility, contrast adjustment).
So if you need to fix this, and you cannot do so upstream, you’ll need to implement the listbox yourself. You might want to track the bugs, and once they are fixed you roll back your custom solution.
The Combobox pattern from the ARIA Authoring Practices Guide (APG) gives an idea of how such a combobox should behave.
The Editable Combobox With Both List and Inline Autocomplete Example might come closest to what browsers do with a datalist.
Once you clarified your expectations, I’m sure you’ll find a library that fits well in your environment, and respects the requirements from the pattern.
Assuming the code below:
<label for="cars">Choose a car:</label>
<select name="carType" id="cars" aria-describedby="feedback">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="carPrice">Enter a purchase price:</label>
<input id="carPrice" type="number" aria-describedby="feedback"></input>
<div id="feedback">The {car} you are considering for {carPrice} is {good/bad} value.</div>
I have used the aria-describedby attribute relating to the feedback div twice. Is this acceptable use? I haven't found any documentation that says this isn't allowed, however it seems there might be another solution.
Kind regards
There is nothing wrong with several elements pointing to the same aria-describedby element. Both "carType/cars" and "carPrice" can point to "feedback".
Note that your first <select> will not have a label because the <label for="carType"> is using the wrong ID in the for attribute. Your <select> has a name attribute of "carType" but name is used for javascript access. The for attribute should refer to the value of the ID attribute. So you need to change your <label> to <label for="cars">
I'm new to HTML and trying to use a datalist. I need to limit it to display only 5 items and the rest to be viewed using scrolldown. Is there any way?
My code :
<form>
<input list="Android" name="Android">
<datalist id="Android">
<option value="Alpha">
<option value="Beta">
<option value="Cupcake">
<option value="Doughnut">
<option value="Eclairs">
<option value="Fryo">
<option value="GingerBread">
<option value="HoneyComb">
<option value="Icecream Sandwich">
<option value="Jelly Bean">
<option value="Kitkat">
<option value="Lollipop">
<option value="Marshmallow">
<option value="Nougat">
</datalist>
<input type="submit">
</form>
This is the output of my code
Thanks in advance!
Well, that's not possible to do, the datalist layout is defined by the browser the same as it does with the select tag and there is very little flexibility on customization. Your example comes from Chrome; in Firefox, it shows only 6 items and on Edge it shows something similar with limited size as well.
The proposed solution is using something else rather that using datalist, if you can't live with the datalist design Chrome offers, try some other component with a similar behavior, like dropdown select, autocomplete, autosugest, typeahead, etc.
I have on this check in form:
<label>Check in date </label>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
As you can see, the user will choose the month, the day and the year on different select boxes, however, only one label should exist for all three.
What would be the proper way to do this with HTML ?
Update:
I'm concerned with the accessibility hit that we may have on developing something like the code above. I mean, a blind user should be able to listen each label in order to fill this form...
The problem with using one label for all three input boxes is that an non-sighted user is not going to know which of three boxes the focus is in because the same text will be read out in each case. There's a number of approaches possible. Maybe the safest is to have a label for each box, but hide those labels off to the left side of the viewport. Another possibility which ought to work, but I haven't tested would be this:
<fieldset>
<legend>Check in date</legend>
<select id="day" aria-label="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="month" aria-label="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="year" aria-label="year">
<option value="1">2012</option>
<option value="2">2013</option>
</select>
</fieldset>
Following with the answer from #Alohci, you can also use aria-labelledby and reverse the naming reference (which I think is a bit closer to the convention you were looking for):
<label id="date">Check in date</label>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
<select aria-labelledby="date">
<!-- ... -->
</select>
Also note, as per the W3C on labelled-by:
If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. User agents give precedence to aria-labelledby over aria-label when computing the accessible name property.
You cannot associate a label element with more than one control. This is described in the definition of label.
You could give each select element its own label.
A better approach is to have a single text input field for a date. Then there is no problem with label. It means more work, since you have to parse the data server-side, and you should also parse it client-side (for checks, so that the user can immediately be informed of problems). But it is better usability (surely it is faster to type in a date than to use three clumsy dropdowns) and better accessibility. You need to decide on a date format and clearly tell the user what the expected format is.
There is no proper way; a label refers to one element. Just point it to the first one.
<label for="day">Check in date </label>
You could also use a specifically-styled <fieldset> if you like semantics, but I think that's a bit overkill. An <input type="date"> is probably the best option here, as it is one element that can be pointed to by your <label>, is more semantic, and can be somewhat friendlier if you implement a good date picker to go along with it.
If you want to stick with the <select>s, try giving each one a title attribute for accessibility.
Trying to improve #Bracketworks answer:
<label id="date">Check in date</label>
<label for="day" id="label_day">Day</label>
<select id="day" aria-labelledby="date label_day">
<!-- ... -->
</select>
<label for="month" id="label_month">Month</label>
<select id="month" aria-labelledby="date label_month">
<!-- ... -->
</select>
<label for="year" id="label_year">Year</label>
<select id="year" aria-labelledby="date label_year">
<!-- ... -->
</select>
See example 1 of MDN's "Using the aria-labelledby attribute".
HTML5's input type="date" might be useful too, particularly if you're using month/day/year select boxes as a way to limit date selection possibilities. This input element supports min and max date attributes, so you can apply your limitations. It's not supported by older browsers, but I've seen smart cookies use jQueryUI's datepicker as a shim (by using capabilities detection to determine type="date" support, then loading in and invoking the datepicker only if it isn't supported natively).
I have a very simple HTML5 page:
<form>
<fieldset>
<label for="cmb_unit">Unit:</label>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<br>
<label for="text_description">Click here and enter 1:</label>
<br>
<textarea id="text_description" name="text_description"></textarea>
</fieldset>
</form>
(or it can be tested online here: http://jsfiddle.net/4qaxR/3/)
The problem is when I select an item from the first control ("Firefox", for example) and enter a number "1" in the next control then this textarea control displays data from "browsers" datalist. Even more, if I click on something from the list then the browser page crashes immediately (it's Chrome "35.0.1916.153 m").
Is it something wrong here?
Yes it seems to be the issue with the browser, It is a chrome browser bug. They have fixed it in their beta release version 36, you will need to download from here https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula this will update your browser and the site will work smoothly...!!!
This issue had cost me 4 months of research on this issue...
Cheers..