WebAIM - Web Accessibility In Mind

E-mail List Archives

Building a New Dropdown for Mobile

for

From: David Ashleydale
Date: May 21, 2013 5:49PM

Hi,

I'm trying to collect some information to give to one of our design teams
to discourage them from building their own dropdown / picker functionality
from scratch. They don't want to use the default <select> functionality
because they don't like how it looks on an iPhone. They don't like how
dropdowns get implemented as wheel picker thingies.

They want to create a form control or something that a user can click on,
then display the list of items in a layer. These would be implemented as
links and they would use JavaScript to allow users to click on an item,
close the layer, and then display their choice. Basically, they are
recreating the <select> functionality, just making it look "better".

I let them know that screen reading software like VoiceOver recognizes the
<select> code and informs the user that it is a "picker" and it further
explains how to interact with it. That is built in to VoiceOver. If we
build something new, VoiceOver won't recognize it as a dropdown. It will
present it as a link that opens an overlay that contains a list of links.
It's not semantically the same as a dropdown / picker.

The team then asked me if we can add hidden text to this new widget that
explains to users how to interact with it. I said yes, but we would have to
do extensive testing to ensure that this experience ends up logical and
intuitive. The nice thing about <select> is that none of that testing and
research needs to be done.

Are there other considerations that you can think of that would discourage
going down the path of developing existing functionality like this from
scratch? Or am I being fussy? :)

Thanks,
David