E-mail List Archives
Thread: JAWS and disabled combobox options
Number of posts in this thread: 18 (In chronological order)
From: Paul Collins
Date: Tue, Jan 10 2017 11:03PM
Subject: JAWS and disabled combobox options
No previous message | Next message →
Hi friends.
I'm currently working on a project where individual options in a select box
are disabled, using the *disabled* attribute:
*<select>*
* <option>option 1</option>*
* <option disabled>option 2</option>*
*</select>*
When using the keyboard arrow keys, it skips over each disabled option.
This also means *JAWS* doesn't read out the disabled option either.
Just wondering if anyone has tackled this and how they managed to
communicate to the screen reader user that the option is there and disabled?
Thanks for any help.
Paul
From: Bryan Garaventa
Date: Wed, Jan 11 2017 1:38AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Hi,
Actually this is an extremely bad practice and breaks not only screen reader accessibility but also keyboard accessibility, making it impossible to use single or multiple letter skipping between key sections within the select within various browsers.
This was so problematic for me at times that I created the following bookmarklet to hack this out of any web page where this was done.
http://whatsock.com/training/matrices/remove_option_disabled.htm
I sincerely suggest that nobody ever do this.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
From: Birkir R. Gunnarsson
Date: Wed, Jan 11 2017 4:51AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
If you are implementing the combobox you could use
aria-disabled="true" to indicate that it the option is disabled (yet
it remains focusable). You'd have to use visual styling to indicate
same.
On 1/11/17, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> Actually this is an extremely bad practice and breaks not only screen reader
> accessibility but also keyboard accessibility, making it impossible to use
> single or multiple letter skipping between key sections within the select
> within various browsers.
>
> This was so problematic for me at times that I created the following
> bookmarklet to hack this out of any web page where this was done.
> http://whatsock.com/training/matrices/remove_option_disabled.htm
>
> I sincerely suggest that nobody ever do this.
>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
From: Jonathan Avila
Date: Wed, Jan 11 2017 9:24AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
> Just wondering if anyone has tackled this and how they managed to communicate to the screen reader user that the option is there and disabled?
The support of aria-disabled doesn't seem to work correctly in my tests with IE and JAWS. But it does seem to be communicated in Firefox. You would then need to communicate somehow visually that the option was disabled as well -- perhaps with some styling?
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Vis Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
See you at CSUN in March!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: JP Jamous
Date: Wed, Jan 11 2017 9:51AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
I am following this post and thinking of it as I don't have the time to test it. I want to fall back to Windows Development for a second to address it.
When a list view or combo box loaded data from a DB, programmers and I always repopulated the items from the DB or an array in the RAM. The question becomes, why do you want to disable a dropdown item if there is no way to interact with it? Simply remove it by using style="display: none;" Problem solved.
From: Bryan Garaventa
Date: Wed, Jan 11 2017 11:33AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Hi,
This does come up in large more complex select fields quite often, though not so much for the standard day to day usage.
Here is an example that demonstrates the scenario.
There is a select element that includes options for all of the counties in the United States, and at the start of each county list is an option element that includes the State name that this section belongs to. E.G California.
Since it's only valid to submit the field when a county is selected, but not when a State name is selected, some developers will disable the State name option element.
The result of this however is that it then makes it impossible to quickly jump to the beginning of these sections by pressing a letter such as "c" to jump to california, and it makes it impossible to even read the State name when arrowing up and down, making it impossible to determine which section you are even in.
It was this type of scenario that drove me to create the bookmarklet because dealing with this type of situation daily was driving me nuts.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
From: JP Jamous
Date: Wed, Jan 11 2017 11:55AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Bryan,
Do you have a page that I can check out? I am not following you, because from your description it sounded like both the States and Counties are loading in the same dropdown box, which cannot be correct.
I know I am losing you somewhere. I do understand though that when one country is selected the state item should become disabled.
Are the counties in a different dropdown or are they check boxes or radio buttons? Just trying to map out the layout in my head.
From: Paul Collins
Date: Wed, Jan 11 2017 9:08PM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Hi everyone, thanks for your replies, I really appreciate your input.
Bryan, your bookmarklet is a great idea, I've saved it. The decision to
disable options in a select box was not mine, it was handed to me - I'm
working on a large scale enterprise app and as you can imagine, in these
situations accessibility is often a series of compromises between UX,
Design, Product Owners, Developers, etc to work out the best solution.
However, based on everyone's feedback, I've managed to come up with a
better solution that seems to satisfy all the stakeholders involved :)
The drop down contained a list of accounts. Some were disabled
occasionally, but we wanted to communicate which ones. I've now removed all
disabled accounts from the drop down and listed them in a descriptive
warning message, associated with the selectbox using aria-describedby.
Hope that makes sense. Thanks for your input everyone, it made me rethink
the design and come up with a better solution.
All the best,
Paul
On 12 January 2017 at 05:55, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> Bryan,
> Do you have a page that I can check out? I am not following you, because
> from your description it sounded like both the States and Counties are
> loading in the same dropdown box, which cannot be correct.
>
> I know I am losing you somewhere. I do understand though that when one
> country is selected the state item should become disabled.
>
> Are the counties in a different dropdown or are they check boxes or radio
> buttons? Just trying to map out the layout in my head.
>
>
From: Bryan Garaventa
Date: Wed, Jan 11 2017 11:06PM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
No problem, happy to help. :) One note for others, the bookmarklet was simply a personal utility I created to work around some accessibility issues I was encountering, but this should not ever be part of any development strategy for making something like this accessible.
To answer a prior question from JP Jamous, the scenario described has only one select element.
E.G Example syntax:
<select title="Choose a County" >
<option >Arizona</option>
<optgroup>
<option> County Name One </option>
<option> County Name Two </option>
</optgroup>
<option >California</option>
<optgroup>
<option> County Name One </option>
<option> County Name Two </option>
</optgroup>
</select>
You can quickly jump to California by typing "cal".
However if you try the following instead, this is impossible.
<select title="Choose a County" >
<option disabled >Arizona</option>
<optgroup>
<option> County Name One </option>
<option> County Name Two </option>
</optgroup>
<option disabled >California</option>
<optgroup>
<option> County Name One </option>
<option> County Name Two </option>
</optgroup>
</select>
This is why this practice should never be done.
Instead, client side scripting should be used to check the value of such options and prevent submission if the intended value is not selected.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
From: JP Jamous
Date: Thu, Jan 12 2017 7:09AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Thank you Bryan. That makes more sense to me now.
From: _mallory
Date: Wed, Jan 18 2017 5:36AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Looks like the developer should have used optgroup instead of
disabled options. The States are groups, but not values
themselves.
cheers,
_mallory
On Thu, Jan 12, 2017 at 08:09:10AM -0600, JP Jamous wrote:
> Thank you Bryan. That makes more sense to me now.
>
>
From: Jonathan Avila
Date: Wed, Jan 18 2017 9:40AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
> Looks like the developer should have used optgroup instead of disabled options. The States are groups, but not values themselves.
Except use of optgroup doesn't allow for keyboard navigation using first letter of the item in the optgroup. And optgroup isn't well supported by assistive technology in my experience.
Jonathan
From: Jim Allan
Date: Wed, Jan 18 2017 11:33AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
in my testing in windows (IE, FF, and chrome) first letter navigation
worked in a select with optgroup.
On Wed, Jan 18, 2017 at 10:40 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED =
> wrote:
> > Looks like the developer should have used optgroup instead of disabled
> options. The States are groups, but not values themselves.
>
> Except use of optgroup doesn't allow for keyboard navigation using first
> letter of the item in the optgroup. And optgroup isn't well supported by
> assistive technology in my experience.
>
> Jonathan
>
>
From: Jonathan Avila
Date: Wed, Jan 18 2017 11:43AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
> in my testing in windows (IE, FF, and chrome) first letter navigation worked in a select with optgroup.
So for example, if the optgroup name is "Mobile" pressing "m" does not take me to the first item under mobile.
Jonathan
From: Jim Allan
Date: Wed, Jan 18 2017 1:33PM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
ah, thanks for the clarification. first letter navigation only works with
the <option>s not the <optgroup>. This is a browser "feature". AT will have
to go beyond standard browser behavior to make <optgroup> navigable.
JAWS and NVDA with Firefox did preface the <optgroup> value when speaking
the <option>. NVDA said "color grouping, blue item 2 of 3"
On Wed, Jan 18, 2017 at 12:43 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED =
> wrote:
> > in my testing in windows (IE, FF, and chrome) first letter navigation
> worked in a select with optgroup.
>
> So for example, if the optgroup name is "Mobile" pressing "m" does not
> take me to the first item under mobile.
>
> Jonathan
>
>
From: Joan Preston
Date: Wed, Jan 18 2017 2:57PM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
From a developer/UI perspective and with a database backend: the user would select the state and then the county select would be populated. I think a list with all the counties in the US would be rather long and if you lived in a state that in near the end of the alphabet, that would take some time to get through the list whether you are sighted or not.
Basically, designing a good UI would be the key to not having a select with options disabled.
Thanks,
Joan Preston
Web Accessibility Coordinator
ITS - California State University, Long Beach
From: Detlev Fischer
Date: Thu, Jan 19 2017 3:31AM
Subject: Re: JAWS and disabled combobox options
← Previous message | Next message →
Hi Jonathan,
So you think the general advice for accessible content would be to avoid optgroup altogether (rather than pushing UA or AT makers to better support it)?
I just had a quick look at the problem myself with Firefox and NVDA, going to an the search page of an app that I developed where we use select with optgroup:
https://anpassungsfinder.de/anpass/anpass_search/
It's the second select labeled "Hilfsmittel"
When I open the select with ALT + ARROW DOWN (or space bar), I am able to type keys to jump straight to options despite the presence of optgroup. So it looks there are implementations where selecting options by letter DO work. (Haven't cecked otzhe browasers and screenreaders yet. BTW in the app, ther ARE issues with selecting options, but I believe they are down to the automatic updating of search results and in turn reduced options dispayed in the select - we need to look at that).
Best, Detlev
--
Detlev Fischer
testkreis c/o feld.wald.wiese
Thedestr. 2, 22767 Hamburg
Mobil +49 (0)157 57 57 57 45
Fax +49 (0)40 439 10 68-5
http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites
Jonathan Avila schrieb am 18.01.2017 17:40:
>> Looks like the developer should have used optgroup instead of disabled
>> options. The States are groups, but not values themselves.
>
> Except use of optgroup doesn't allow for keyboard navigation using first letter
> of the item in the optgroup. And optgroup isn't well supported by assistive
> technology in my experience.
>
> Jonathan
>
>
From: Jonathan Avila
Date: Fri, Jan 20 2017 8:16PM
Subject: Re: JAWS and disabled combobox options
← Previous message | No next message
> When I open the select with ALT + ARROW DOWN (or space bar), I am able to type keys to jump straight to options despite the presence of optgroup. So it
Detlev, the issue is that you can't press the letter of the optgroup name to jump to that group. So there is no way to quickly navigate between groups.
Separately, in my experience with IE the optgroup names are not announced with screen readers. I believe the optgroup names are announced in Firefox.
Jonathan