仅当用户使用选项卡时才设置元素的焦点

Question

我正在尝试使我的网站上的一些可折叠手风琴容器可访问，但我遇到了问题。

手风琴由页面上的链接元素控制 - 这样，只有键盘的用户可以通过 Tab 键访问它们并访问它们。我遇到的第一个问题是，如果用户切换到其中一个链接，页面不会总是向上滚动以显示他们切换到哪个链接。我使用以下代码修复了设置焦点的问题，该代码将链接滚动到视口顶部：

$(".accordion .accordion-item .accordion-heading a").focus(
    function()
    {
        $('html:not(:animated), body:not(:animated)').animate({
            scrollTop: $(this).offset().top
        }, 250);
    }
    );

我现在遇到的问题是，当鼠标用户单击链接时，它会跳转到页面顶部并且不会打开容器，除非鼠标用户再次单击该链接。

有没有办法可以将上面的焦点代码设置为仅在链接已被选项卡到时触发？或者，是否有更好的方法来处理焦点问题，使其适用于仅键盘用户和鼠标用户？

谢谢！

Answer 1

首先快速道歉，现在已经看到您的手风琴已正确构建，如果手风琴是在页面加载时使用 javascript 构建并回退到页面内锚链接和内容的列表，则实际上更可取的是带有页面内锚的链接他们之间。

我习惯于在手风琴开瓶器上看到<a href="#"> 和奇怪的手风琴实现我草草下结论，把它从<buttons> 改回来！

解决您的问题

可能不是您正在寻找的答案，但请完全删除 .focus() 函数。

它会产生奇怪的行为，如果我打开了一个手风琴项目并且我使用 Alt + Tab 快速滚动可能会非常混乱，因为如果你使用 Tab，它会跳来跳去比滚动更快。

可访问性的黄金法则之一是仅在预期的情况下调整页面上的滚动位置（即return to top 按钮或使用页内锚点）。

在示例中以及在您的网站上，一旦我禁用了“焦点上滚动到顶部”，该网站实际上就按预期运行了。

我理解您为什么这样做，因为偶尔会出现一个焦点链接出现在页面之外，但是当您再次点击或向下滚动时，这会自行补救（您的网站是合乎逻辑的，因此如果我点击并且我的焦点不可见，我知道它不在页面上。）

这往往会发生（项目不滚动到视图中），当项目刚刚看不见时，一两个像素，这是很常见的，具有讽刺意味的是，现在属于“预期”行为（另一条规则，遵循接受和预期的行为在设计组件和页面时）。

如果你真的想修复它

在您的 focus 函数中，当一个项目获得焦点时，不要只是滚动到页面顶部，而是检查它是否离开页面。

下面是我发现（未测试）的示例函数，您可以使用它来检查项目是否在视口中，如果是则不要执行任何操作，如果不是则执行滚动功能。

var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

这么粗略（再次没有测试是否传入了正确的项目，这只是为了给你一个想法）。

$(".accordion .accordion-item .accordion-heading a").focus(
    function()
    { 
        if(isInViewport(this) === false){
             //item is not in the viewport so scroll it into view
            $('html:not(:animated), body:not(:animated)').animate({
                scrollTop: $(this).offset().top //I would perhaps add a couple of hundred pixels here to make the item appear in a more natural area.
            }, 250); //remove the animation as a further accessibility improvement, animations can be off putting to people with motion or anxiety disorders.
        }
    }
);

这解决了您的问题，因为鼠标用户将永远无法单击页面外的项目，因此他们将永远不会触发导致焦点问题的滚动事件。

Answer 2

您可以更改事件设置：取而代之的是 focus() 事件，您将执行 click() 事件：当您单击链接时，您将向上滚动。这将解决键盘导航和鼠标点击的问题；在可访问性方面也更是如此。

$(".accordion .accordion-item .accordion-heading a").click(
function(e)
{
    e.preventDefault();
    $('html:not(:animated), body:not(:animated)').animate({
        scrollTop: $(this).offset().top
    }, 250);
}
);

不要忘记通过添加 role=button 属性将链接设置更改为按钮。 并添加 aria-expanded 属性。