html - 在可访问菜单(html 格式)、制表符或箭头键中移动焦点的当前最佳做法是什么?

标签 html navigation focus accessibility screen-readers

一位同事向我介绍了 http://access.aol.com/dhtml-style-guide-working-group/#menu ,但我不确定那里的信息是如何更新(或更新!)的。我也试过http://www.w3.org/TR/wai-aria/ (以及许多其他网站!),但看不到任何可以回答我的具体问题的内容。

我在一个网站上工作,其中一个小部件将焦点带到水平链接列表中的项目。我想确保允许用户使用 Tab 键到菜单开头但随后使用向左和向右箭头键而不是 Tab 键来浏览各个列表项仍然是一种很好的做法。我可以想象有些用户会更喜欢/更轻松地使用每种方法。我想提一下,我已经在屏幕阅读器上测试了该网站,它确实口头确认了每一项。

在此先感谢您的帮助!

最佳答案

您所描述的听起来像菜单。 W3C WAI documentation表示使用箭头键在菜单栏项目或下拉列表中导航项目。

  • Press the 'Tab' key to move through the elements on the page. You can press 'Shift-Tab' to go backwards.
  • To move within elements such as drop-down lists and menu bars, press the arrow keys.

ARIA authoring documentation 上提供了类似的说明:

  • Keyboard Actions if focus is on a menu item
  • Left arrow: Open next pull down menu and select first item
  • Right arrow: Open previous pull menu and select first item
  • Up arrow: Select previous menu item
  • Down arrow: Select next menu item
  • Enter: Invoke selected item and dismiss menu
  • Space: Invoke selected item and dismiss menu
  • Esc: Close menu and return focus to menubar

关于html - 在可访问菜单(html 格式)、制表符或箭头键中移动焦点的当前最佳做法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26287162/

相关文章:

html - TD 样式字体粗细不应用粗体格式

javascript - 带有事件选项卡的动态 Bootstrap 导航

html - 使用 CSS 和单个列表的简单 2 列导航?

wpf - 将 RadioButton IsChecked 绑定(bind)到 ListBoxItem IsSelected 和 ListBox IsFocused

javascript - 仅显示存储在 js 变量中的选定 html 标签

html - 使按钮和链接高度相同

javascript - HTML5 音频流 : precisely measure latency?

android - 从 Android Activity 导航中删除历史记录

html - 焦点上的 css 改变另一个 div 的样式

java - 在 Swing 中为对话框设置初始焦点组件的正确方法是什么?