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
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.