选择元素的可访问 JavaScript 替代方案
我正在开发一些 javascript 代码,它将用 javascript 控制的下拉菜单替换标准选择元素,该菜单会将用户重定向到特定页面。当 JS 被禁用时,标准 select 元素必须工作
我想要实现的示例如下:www.play.com
我在这个网站上注意到的是,他们只是将 select 元素放置在 javascript 替代方案后面。这意味着屏幕阅读器和键盘用户都可以使用这两个控件。
有谁有设置此类功能的经验,并对确保可访问性的最佳方法有任何建议吗?
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 have any experience of setting such functionality up and have any suggestions for the best methods to ensure accessibility?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
普通链接将是您的起始设置,因为它们可以将用户带到新页面,而不需要任何额外的脚本。
您可以将它们放入容器 ul 中,然后以“渐进增强”的方式使用 javascript 将列表转换为下拉列表(通过重写 html),以供打开它的人使用。这样,没有打开 javascript 的用户不会有任何问题,并且大多数用户都会看到你的下拉菜单。
更好的是,不要使用选择菜单进行导航。它在语义上并不真正正确,并且需要更多的工作才能使其可操作且健壮。
尝试类似基于嵌套列表的 Suckerfish 下拉菜单:http://www.htmldog。 com/articles/suckerfish/ 或者如果您想要一点 jQuery 的乐趣:http://users.tpg.com.au/j_birch/plugins/superfish/#sample1
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