jquery - 辅助功能跳过导航菜单更改视觉焦点,而不是选项卡焦点 - 我该如何解决这个问题

标签 jquery html css accessibility

我有一个辅助功能跳过导航菜单,它使用命名 anchor 跳转到内容区域。

这些内容区域(顶部菜单、左侧菜单、主体内容和页脚菜单)也有内部链接。

当我进入跳过导航菜单并单击其中一个链接时,它会正确地将视觉焦点移动到相关内容区域。

但是,如果我再次按 Tab 键,它会继续按 Tab 键浏览剩余的跳过导航项。

我原以为它会在我刚刚“跳转”到的内容区域内的链接中切换。

目前我没有在任何元素上使用标签索引

我正在使用 HTML5,想知道是否可以通过编程将我刚刚“跳转”到的元素的制表符索引更改为 1,希望它会强制制表符从新位置开始。

这对可访问性不利吗?

欢迎任何帮助或建议

最佳答案

我们最近遇到了这个完全相同的问题,并发现了两个不同的浏览器错误...

在 IE 中,您要跳转到的元素必须指定宽度才能使功能正常工作。

http://webaim.org/techniques/skipnav/#iequirk

它也发生在 Webkit (Chrome/Safari) 中,尽管 AFAIK 没有针对这些浏览器的修复(如果有人知道的话,很高兴得到纠正!)

http://code.google.com/p/chromium/issues/detail?id=37721

使用 tabindex 通常不是一个好主意,而是尝试从逻辑上构建 HTML,以便 tab 顺序自行正确流动

关于jquery - 辅助功能跳过导航菜单更改视觉焦点,而不是选项卡焦点 - 我该如何解决这个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8817367/

相关文章:

jquery - 获取截面面积的值?

html - 如何摆脱内部元素小部件中的 CSS 级联

javascript - 具有可滚动行和固定标题的表格

php - 即使 PHP 文件设置正确,也没有 Ajax 响应

css - Bootstrap 4 和列排序

css - 在 Laravel 中无法访问公用文件夹中的 Webfont

html - 当我在我的网站上从一个页面跳到下一个页面时,它会在 Chrome 中公开 HTML

javascript - 当元素向上滚动到页面顶部时,我想将元素的不透明度从 0 更改为 1

jquery - 使用 JQuery getJSON 方法

javascript - 匹配标准和离群值输入的正则表达式