RE: Accessible styled form select

If it’s of help, I wrote the following blog post back in 2013 that illustrates how the pieces of making a widget like a Listbox works, and the two supported methods for making this function properly. All of the data is still valid.
https://www.ssbbartgroup.com/blog/why-there-are-only-two-ways-to-make-aria-widgets-programmatically-focusable-for-screen-reader-users/


All the best,
Bryan



Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
bryan.garaventa@ssbbartgroup.com
415.624.2709 (o)
www.SSBBartGroup.com

From: Matt King [mailto:a11ythinker@gmail.com]
Sent: Friday, February 17, 2017 6:44 PM
To: 'Beranek, Nicholas' <Nicholas.Beranek@capitalone.com>; 'Lisette Arocha (US - Advisory)' <lisette.m.arocha@pwc.com>; w3c-wai-ig@w3.org
Subject: RE: Accessible styled form select

In ARIA terms, an HTML select is much more like a listbox than a combobox. ARIA defines a combobox as the combination of an edit and another element to help set the value of the edit, such as a listbox. An HTML select does not include an edit field.

The listbox design pattern is much simpler. We have a draft with some examples, not yet fully vetted but still in pretty reasonable state at:
http://w3c.github.io/aria-practices/#Listbox


Please do not use the content in the deleted sections page of the master branch of authoring practices. We kept it in the github repository for reference by people working on the guide, but the content has been deleted because it was not adequately vetted and contains easily recognizable errors.

I plan to have a draft of the combobox pattern in review before the end of March.

Matt King


From: Beranek, Nicholas [mailto:Nicholas.Beranek@capitalone.com]
Sent: Wednesday, February 15, 2017 12:28 PM
To: Lisette Arocha (US - Advisory) <lisette.m.arocha@pwc.com<mailto:lisette.m.arocha@pwc.com>>; w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: RE: Accessible styled form select

Ah, the infamous Combo box widget. It depends on how much work you want to put into it. The design pattern within the WAI-ARIA authoring practices can be found at the following link: https://rawgit.com/w3c/aria-practices/master/aria-practices-DeletedSectionsArchive.html#combobox


There is an open issue on Github for that pattern to revamp it at the following link: https://github.com/w3c/aria-practices/issues/31


It is a complicated widget. I do recommend maintaining a native SELECT, but you can keep it hidden beneath a button. When the button is activated, we display the listbox within the SELECT menu. It allows for you to have that initial style you want, but gives you that default keyboard functionality that you’d otherwise need using JavaScript.

The following link is an example of the design pattern I just mentioned: http://www.456bereastreet.com/lab/custom-select/


The only problem I can see with the combo box example is the fact that when you open the Listbox and then close it, the visual focus indicator doesn’t display even though <select> has focus. You would expect the indicator to show each time it receives focus.

Let me know if I can help you further!

Nick
Capital One

From: Lisette Arocha (US - Advisory) [mailto:lisette.m.arocha@pwc.com]
Sent: Tuesday, February 14, 2017 10:11 AM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
Subject: Accessible styled form select

In my work as a front end developer I encourage clients to use the native select field but I still have clients that want to have custom styled selects which means I would need to style a list and have it control the select hidden on the page.

Curious if anyone has resources or a plugin that shows how to do this in a way that is fully accessible.

Thanks!

Lisette Arocha
PwC | Experience Center | Senior Associate, Technology
Direct: 786-427-6894 <tel:786-427-6894>  | Mobile: (954)296-5792<tel:954-296-5792>

Email: lisette.m.arocha@pwc.com <mailto:lisette.m.arocha@pwc.com>
PricewaterhouseCoopers LLP
600 Silks Run, Suite 2210, Hallandale Beach, FL 33009
digital.pwc.com/experiencecenter<http://digital.pwc.com/experiencecenter>

________________________________
The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited, and all liability arising therefrom is disclaimed. If you received this in error, please contact the sender and delete the material from any computer. PricewaterhouseCoopers LLP is a Delaware limited liability partnership. This communication may come from PricewaterhouseCoopers LLP or one of its subsidiaries.

________________________________

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.