选择元素的可访问 JavaScript 替代方案

发布于 2024-12-10 08:04:35 字数 260 浏览 0 评论 0原文

我正在开发一些 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

听不够的曲调 2024-12-17 08:04:35

普通链接将是您的起始设置,因为它们可以将用户带到新页面,而不需要任何额外的脚本。

您可以将它们放入容器 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文