WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Opinions on Custom Select Menu Behavior

for

Number of posts in this thread: 5 (In chronological order)

From: Vincent Young
Date: Thu, Oct 27 2011 5:51PM
Subject: Opinions on Custom Select Menu Behavior
No previous message | Next message →

Select menus seem to have no consistency in terms of interaction and
identification within screen readers. For example:

http://webaim.org/techniques/forms/controls#select

In Safari/VoiceOver this select menu is identified as a pop-up button and
opens via down-arrow. In Firefox/Jaws it is identified as a combobox and
opens via alt+down arrow. What I'm wondering is when you are creating a
custom select menu with ARIA (e.g. Filament Group Custom Select
Menu<http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/>;),
should you try to mimic the interaction/identification found in the native
control across different user agents/Assistive Technology or should you
attempt to standardize across the board. If you standardize, what should
you standardize on? Separate implementation is possible, but a total pain.


Thoughts please. Thanks.

Best,
Vincent

--
WebHipster Interactive, ltd.
Vincent Young - Principal
742 N Sweetzer
West Hollywood, CA 90069
p: 614.607.3400
f: 339-674-3400
e: = EMAIL ADDRESS REMOVED =
w: http://www.webhipster.com

From: Jared Smith
Date: Thu, Oct 27 2011 6:18PM
Subject: Re: Opinions on Custom Select Menu Behavior
← Previous message | Next message →

The Filament Group custom select menu has an actual <select> menu that
is interacted with. This means that the behavior will be typical for
the browser it is presented in. There's no need to pick or program
behavior that is specific to one browser or assistive technology.

Jared Smith
WebAIM.org

From: Vincent Young
Date: Thu, Oct 27 2011 6:45PM
Subject: Re: Opinions on Custom Select Menu Behavior
← Previous message | Next message →

You're right. Not sure, why I thought they were using ARIA. Better
example:http://dojotoolkit.org/reference-guide/dojox/form/DropDownSelect.html.
I'm trying to come up with an ARIA solution that will work today. Just
want to make sure users are OK with the disconnect. If I am using the
combobox role for the select menu it is notified as combobox, but in
Safari/VoiceOver the native select is notified as a menu. Have you or
anyone run into any issues with this? Thanks.

On Thu, Oct 27, 2011 at 5:18 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:

> The Filament Group custom select menu has an actual <select> menu that
> is interacted with. This means that the behavior will be typical for
> the browser it is presented in. There's no need to pick or program
> behavior that is specific to one browser or assistive technology.
>
> Jared Smith
> WebAIM.org
>

From: Vincent Young
Date: Thu, Oct 27 2011 7:03PM
Subject: Re: Opinions on Custom Select Menu Behavior
← Previous message | Next message →

Also, if we should not pick or program behavior that is specific to one
browser or assistive technology then what should the standard be? If we
should look toward the AOL DHTML Style Guide (
http://dev.aol.com/dhtml_style_guide#combobox) for interaction standards I
am fine with that, but in terms of what should be read and how I am
uncertain.

For example when you have an aria combobox focused and closed when you type
the first letter in which is the start of one of the listitems, that list
items gets selected (just like in a native select). However in many
browsers/assistive technology proper notification is not given to the user a
change has occurred so a hack must be implemented. How and what should be
read is what I am wondering.


On Thu, Oct 27, 2011 at 5:44 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:

> You're right. Not sure, why I thought they were using ARIA. Better
> example:http://dojotoolkit.org/reference-guide/dojox/form/DropDownSelect.html.
> I'm trying to come up with an ARIA solution that will work today. Just
> want to make sure users are OK with the disconnect. If I am using the
> combobox role for the select menu it is notified as combobox, but in
> Safari/VoiceOver the native select is notified as a menu. Have you or
> anyone run into any issues with this? Thanks.
>
>
> On Thu, Oct 27, 2011 at 5:18 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>
>> The Filament Group custom select menu has an actual <select> menu that
>> is interacted with. This means that the behavior will be typical for
>> the browser it is presented in. There's no need to pick or program
>> behavior that is specific to one browser or assistive technology.
>>
>> Jared Smith
>> WebAIM.org
>>

From: Vincent Young
Date: Fri, Oct 28 2011 3:33AM
Subject: Re: Opinions on Custom Select Menu Behavior
← Previous message | No next message

And an early ARIA combobox example I've been working on:

http://www.webhipster.com/testing/accessibility/combobox/

I am being FORCED to implement this as an ARIA combobox... diplomacy FTW! I
want to be sure there is proper notification and the user experience is more
than just tolerable. Has anyone had experience implementing a custom ARIA
combobox across a lot of different browsers/AT and not just JAWS 13/IE 10?
We support the following:

JAWS 11+ IE8+ & FF 3.6+
NVDA+ FF 3.6+
VoiceOver 10.7+
(IOS 5 if possible)

Any help, experience, suggestions, feedback, comments, etc. would be much
appreciated.



On Thu, Oct 27, 2011 at 6:01 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:

> Also, if we should not pick or program behavior that is specific to one
> browser or assistive technology then what should the standard be? If we
> should look toward the AOL DHTML Style Guide (
> http://dev.aol.com/dhtml_style_guide#combobox) for interaction standards I
> am fine with that, but in terms of what should be read and how I am
> uncertain.
>
> For example when you have an aria combobox focused and closed when you type
> the first letter in which is the start of one of the listitems, that list
> items gets selected (just like in a native select). However in many
> browsers/assistive technology proper notification is not given to the user a
> change has occurred so a hack must be implemented. How and what should be
> read is what I am wondering.
>
>
> On Thu, Oct 27, 2011 at 5:44 PM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:
>
>> You're right. Not sure, why I thought they were using ARIA. Better
>> example:http://dojotoolkit.org/reference-guide/dojox/form/DropDownSelect.html.
>> I'm trying to come up with an ARIA solution that will work today. Just
>> want to make sure users are OK with the disconnect. If I am using the
>> combobox role for the select menu it is notified as combobox, but in
>> Safari/VoiceOver the native select is notified as a menu. Have you or
>> anyone run into any issues with this? Thanks.
>>
>>
>> On Thu, Oct 27, 2011 at 5:18 PM, Jared Smith < = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> The Filament Group custom select menu has an actual <select> menu that
>>> is interacted with. This means that the behavior will be typical for
>>> the browser it is presented in. There's no need to pick or program
>>> behavior that is specific to one browser or assistive technology.
>>>
>>> Jared Smith
>>> WebAIM.org
>>>