Need to pick an accessible drop-down...

[Li, Cindy]

Hi Bosmon,

The combo box used in PMT/PCP was built on top of the jQuery autocomplete combo box. Its accessibility issue is described in GPII-659<http://issues.gpii.net/browse/GPII-659>

The jQuery combo box used by PMT/PCP is an earlier combo box version that has a worse accessibility problem: when users use keyboard to navigate thru the listed items, screen readers announce some items as “blank” and other items correctly. So for the ones announced as “blank”, users have no idea what they are. To work around it, we placed a live region which gets updated at every item selection change, which results in the situation described in GPII-659<http://issues.gpii.net/browse/GPII-659>.

I just tried the latest jQuery autocomplete combo box<https://jqueryui.com/resources/demos/autocomplete/combobox.html>. Seems the similar work around was placed in and it has exactly same problem as GPII-659<http://issues.gpii.net/browse/GPII-659>. Better but still not right ..

Good luck and let me know if anything I can help.

Cindy

On Aug 20, 2014, at 7:50 AM, Antranig Basman <antranig.basman at colorado.edu<mailto:antranig.basman at colorado.edu>> wrote:

Thanks Dana - it looks like there is a shared need for a common, accessible and stylable select box control. I'm happy to shepherd this effort, hopefully leading to a core Infusion component that we can easily share out to all of our projects. Do you have some more details on the kinds of stylability you would need, as well as a report on the mismatch of the keyboard accessibility you require versus what the jquery selectbox provided? If we had a short set "canned script" of interactions we would like the user to be able to manage, as well as a few pointers on what the requirements are for stylability, that would be a great start.
We could then try to decide whether it is still worth working on all or part of one of the existing widgets as the base for wrapping up our more accessible and stylable component (this is preferable, since no matter how bad the underlying widget is, there are often ways of civilizing its interaction from the outside, as long as one tries hard enough - as for example I eventually managed with the jQuery tooltip widget)

Dana - is the jquery-selectbox the same widget that you had experience with with Cindy? Do you have JIRAs or other reports about your accessibility experiences with it?

Cheers,
Antranig

On 18/08/2014 18:00, Dana Ayotte wrote:
Hi Tony,
I'm not sure how much of the PMT/PCP work you're aware of (so I apologize if I'm stating the obvious here)
-- we implemented combo boxes/drop-down menus in the PMT and PCP but they are not ideal. As I understand
after a brief discussion with Cindy we also began with a jquery select box but we are not satisfied with the
keyboard accessibility nor with the limitations of styling that you point out.  I can't speak to the
technical details but wanted to confirm with you that we have not yet come up with a better starting point
and we are still in need of an accessible solution. I've copied the GPII UX list here as well in case any of
the developers can comment further.
Dana

On Aug 14, 2014, at 3:59 AM, Tony Atkins <tony at raisingthefloor.org<mailto:tony at raisingthefloor.org> <mailto:tony at raisingthefloor.org>> wrote:

Hi, All:

In order to implement the reviewer interface for the Common Terms Registry, I need an accessible drop-down
menu that I can wire into my data model, for example to allow the user to select their language.  This
would also be used in an alternate form as a simple drop-down menu (logout links in a "user" menu).  If
you want to see it in situ, here are the mockups
<http://wiki.fluidproject.org/download/attachments/34570511/ctr-mockups3.pdf>.

My preference is to start with a select box, as it comes with decent keyboard arrow support for free.
However, there are serious limitations on how well you can style selects, as most browsers strongly
impose their implicit styling on them. Most sane approaches seem to hide the select itself and present an
alternate control in its place.

Last week, Antranig and I did a brief review of libraries that follow this approach.  We talked about
starting with jquery-selectbox:

http://marcj.github.io/jquery-selectBox/

There are some bugs with multi-selects <https://github.com/marcj/jquery-selectBox/issues/160> and Firefox
<https://github.com/marcj/jquery-selectBox/issues/161> (I've filed issues for both), but it seems as good
a starting point as any.

I wanted to check in with the group and make sure that:

1. No one has already created a fluid component that addresses the general need for drop-down menus and
   upstyled select boxes.  I haven't seen one in our demos or code repo.
2. There are no other better starting points for this work.

Please comment.

Thanks,


Tony
_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org> <mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work


_______________________________________________________
fluid-work mailing list - fluid-work at fluidproject.org<mailto:fluid-work at fluidproject.org>
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20140820/bb78e0ed/attachment.htm>