E-mail List Archives
Thread: Building a New Dropdown for Mobile
Number of posts in this thread: 4 (In chronological order)
From: David Ashleydale
Date: Tue, May 21 2013 5:49PM
Subject: Building a New Dropdown for Mobile
No previous message | Next message →
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
From: Paul Adam
Date: Tue, May 21 2013 6:27PM
Subject: Re: Building a New Dropdown for Mobile
← Previous message | Next message →
http://jquerymobile.com/demos/1.2.1/docs/forms/selects/custom.html
Try jQuery mobile Custom select menus
Sent from my iPhone
On May 21, 2013, at 6:49 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = > wrote:
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
From: David Ashleydale
Date: Tue, May 21 2013 6:40PM
Subject: Re: Building a New Dropdown for Mobile
← Previous message | Next message →
Cool. Are those generally accepted as being accessible?
On Tuesday, May 21, 2013, Paul Adam wrote:
> http://jquerymobile.com/demos/1.2.1/docs/forms/selects/custom.html
>
> Try jQuery mobile Custom select menus
>
>
> Sent from my iPhone
>
> On May 21, 2013, at 6:49 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = <javascript:;>>
> wrote:
>
> 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
> > > > > > >
From: Paul J. Adam
Date: Tue, May 21 2013 7:27PM
Subject: Re: Building a New Dropdown for Mobile
← Previous message | No next message
Yes all of jQuery Mobile that I've tested is accessible. It uses progressive enhancement and WAI-ARIA.
http://jquerymobile.com/demos/1.2.1/docs/about/accessibility.html
Accessibility
jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's WAI-ARIA specification.
By utilizing these techniques, we do our best to ensure an accessible experience to users with disabilities such as blindness, who may use screen readers (like VoiceOver, on Apple's iPhone device) or other assistive technology to access the web.
Paul J. Adam
Accessibility Evangelist
www.deque.com
On May 21, 2013, at 7:40 PM, David Ashleydale < = EMAIL ADDRESS REMOVED = > wrote:
> Cool. Are those generally accepted as being accessible?
>