[wordpress插件] Accessible Dropdown Menus可访问的下拉菜单

86

86

Purpose:

目的：

Many sites have dropdown menus where the expanding of the links can only be triggered by a mouse hover.

许多站点都有下拉菜单，其中链接的扩展只能通过鼠标悬停来触发。

This means that for keyboard only users parts of the site are harder or sometimes impossible to reach.

这意味着对于键盘用户，网站的某些部分更难甚至有时无法访问。

This plugin makes these dropdown menus keyboard accessible.

此插件可通过键盘访问这些下拉菜单。

When tabbing through the primary navigation the sub level menus will become visible and users will be able to tab to the lower level links.

在主导航中切换时，子级别的菜单将变为可见，并且用户将可以跳到较低级别的链接。

The current version has been tested by both sighted keyboard-only users and screen reader users.

仅使用键盘的用户和屏幕阅读器用户均已测试了当前版本。

If it doesn’t work for your reader, please let us know!

如果对您的读者不起作用，请告诉我们！

How it Works:

工作原理：

The plugin uses a combination of CSS and javascript to enable the dropdown menus to be keyboard controlled.

插件使用CSS和javascript的组合来使下拉菜单可以通过键盘控制。

Using the script, whenever a link in the menu gets focus its containing list item (

使用脚本，只要菜单中的链接获得焦点，其包含的列表项（

) is given the necessary class.

）被赋予必要的类。

This enables the new CSS definitions to open any hidden submenus and bring those links into the tabbing order.

这样，新的CSS定义就可以打开任何隐藏的子菜单，并将这些链接按Tab键顺序排列。

In the absence of javascript the full submenu lists may not open but the individual sub-links can be tabbed to.

在没有javascript的情况下，可能无法打开完整的子菜单列表，但可以将各个子链接设置为选项卡。

Credits:

积分：

Current version built and maintained by Amy Hendrix.

由Amy Hendrix构建和维护的当前版本。

The original version of this plugin was built by Graham Armfield.

此插件的原始版本由Graham Armfield构建。

It is still available at http://www.coolfields.co.uk/2011/12/wordpress-keyboard-accessible-dropdown-menus-plugin-version-0-1/

它仍然可以在http://www.coolfields.co.uk/2011/12/wordpress-keyboard-accessible-dropdown-menus-plugin-version-0-1/ 上找到。

The mechanism used in this plugin is based on the same logic used in Blake Haswell’s excellent example of a multi-level accessible dropdown menu.

此插件中使用的机制基于Blake Haswell出色的多级可访问下拉菜单示例中使用的逻辑。

You can find it at: http://blakehaswell.com/lab/dropdown/deux/

您可以在以下位置找到它：http://blakehaswell.com/lab/dropdown/deux/

https://downloads.wordpress.org/plugin/accessible-dropdown-menus.0.4.1.zip

https://downloads.wordpress.org/plugin/accessible-dropdown-menus.0.4.1.zip