键盘无障碍导航答案

【问题标题】：Keyboard accessible navigation键盘无障碍导航
【发布时间】：2016-01-21 20:52:42
【问题描述】：

我目前正在将此脚本用于 WordPress 主题中的下拉菜单项：http://jsfiddle.net/i_like_robots/6JbtX/

$(function()
{
var $dropdowns = $('li.dropdown'); // Specifying the element is faster for older browsers

/**
 * Mouse events
 *
 * @description Mimic hoverIntent plugin by waiting for the mouse to 'settle' within the target before triggering
 */
$dropdowns
    .on('mouseover', function() // Mouseenter (used with .hover()) does not trigger when user enters from outside document window
    {
        var $this = $(this);

        if ($this.prop('hoverTimeout'))
        {
            $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
        }

        $this.prop('hoverIntent', setTimeout(function()
        {
            $this.addClass('hover');
        }, 250));
    })
    .on('mouseleave', function()
    {
        var $this = $(this);

        if ($this.prop('hoverIntent'))
        {
            $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
        }

        $this.prop('hoverTimeout', setTimeout(function()
        {
            $this.removeClass('hover');
        }, 250));
    });

/**
 * Touch events
 *
 * @description Support click to open if we're dealing with a touchscreen
 */
if ('ontouchstart' in document.documentElement)
{
    $dropdowns.each(function()
    {
        var $this = $(this);

        this.addEventListener('touchstart', function(e)
        {
            if (e.touches.length === 1)
            {
                // Prevent touch events within dropdown bubbling down to document
                e.stopPropagation();

                // Toggle hover
                if (!$this.hasClass('hover'))
                {
                    // Prevent link on first touch
                    if (e.target === this || e.target.parentNode === this)
                    {
                        e.preventDefault();
                    }

                    // Hide other open dropdowns
                    $dropdowns.removeClass('hover');
                    $this.addClass('hover');

                    // Hide dropdown on touch outside
                    document.addEventListener('touchstart', closeDropdown = function(e)
                    {
                        e.stopPropagation();

                        $this.removeClass('hover');
                        document.removeEventListener('touchstart', closeDropdown);
                    });
                }
            }
        }, false);
    });
}

});

但是，我需要这些项目可以通过键盘访问。

谁能指出我正确的方向？

谢谢！

【问题讨论】：

标签： wordpress navigation accessibility

【解决方案1】：

您正在尝试实现类似于Chimera 的用户界面模式。您有一个元素（顶级菜单项）试图既是链接又是菜单项（带有子菜单）。让这种用户体验易于访问和使用是非常困难的。

如果您按照@tom-usborne 的建议进行操作，只需打开focusin 和focusout 上的菜单，那么仅使用键盘的用户将不得不在所有下拉菜单中的每一个菜单项之间切换。想象一下史蒂文霍金不得不用他的脸颊肌肉多次按下 Tab 键！不太好用。

替代方法 - 例如实现ARIA authoring guidelines for menu interaction 意味着根本无法访问顶级项目的链接（因为回车键会打开菜单而不是单击链接）。

但是，如果你只是简单地实现 ARIA 模式，那么你会发现在 iOS 上，菜单无法交互。我推荐一种混合方式，您可以将顶级链接移动到菜单中，允许使用正常单击（或触摸或鼠标悬停）打开和关闭菜单，然后一旦打开，您可以通过选项卡浏览菜单中的所有链接.这种方法适用于所有设备。

【讨论】：

【解决方案2】：

这个问题的答案是使用 focusin 和 focusout 处理程序：

$dropdowns
.on('focusin', function() // Mouseenter (used with .hover()) does not trigger when user enters from outside document window
{
    var $this = $(this);

    if ($this.prop('hoverTimeout'))
    {
        $this.prop('hoverTimeout', clearTimeout($this.prop('hoverTimeout')));
    }

    $this.prop('hoverIntent', setTimeout(function()
    {
        $this.addClass('hover');
    }, 250));
})
.on('focusout', function()
{
    var $this = $(this);

    if ($this.prop('hoverIntent'))
    {
        $this.prop('hoverIntent', clearTimeout($this.prop('hoverIntent')));
    }

    $this.prop('hoverTimeout', setTimeout(function()
    {
        $this.removeClass('hover');
    }, 250));
});

【讨论】：