Accessible javascript alternatives to select elements

I am developing some javascript code that will replace a standard select element with a javascript controlled dropdown menu which will redirect users to a particular page. The standard select element must work when JS is disabled

An example of what I want to achieve is here: www.play.com

What I have noticed with this site is that they simply position the select element behind the javascript alternative. This means that both controls are available to screen readers and keyboard users.

Does anyone h开发者_运维知识库ave any experience of setting such functionality up and have any suggestions for the best methods to ensure accessibility?

---

Plain links would be your starting setup, as they work to take users to new pages without any additional scripting required.

You can put them in a container ul, and then use javascript in a 'progressive enhancement' way to turn the list into a dropdown (by re-writing the html) for the people who've got it turned on. This way, a user without javascript turned on will have no problems, and the majority of users will see your drop-down menu.

Even better, don't use a select menu for navigation. It's not really semantically correct, and requires more work to make it operable and robust.

Try something like the Suckerfish drop-down menus which are based on nested lists: http://www.htmldog.com/articles/suckerfish/ or if you want a bit of jQuery fun: http://users.tpg.com.au/j_birch/plugins/superfish/#sample1