没有锚点的“跳过导航”链接

"Skip Navigation" Link without anchors

本文关键字：导航 跳过导航 链接      更新时间：2023-09-26

>我正在尝试创建一个"跳过导航"链接，但无法使用锚点。该网站以一种特殊的方式构建，其中锚链接格式已被重新利用。因此，我试图允许人们通过使用焦点跳过导航。但是，它不起作用。

跳过导航链接本身的 HTML 代码：

<!-- Start Top Left in Nav Bar -->
<aside>
<a href="" onClick="javascript:skipNav()" tabindex="1" id="skipNav" role="link">Skip Navigation</a>
</aside>
<!-- End Top Left in Nav Bar -->

用于更改焦点的代码

var nav = document.getElementById('#skipNav');
nav.onclick=skipNav();
function skipNav(){
     document.activeElement.blur();
    if ($('#linkHome').hasClass('current')==true)
    {
        $('#homeFocus').focus();
    }
    if ($('#linkTeam').hasClass('current')==true)
    {
        $('#teamFocus').focus();
    }
    if ($('#linkTraining').hasClass('current')==true)
    {
        $('#trainingFocus').focus();
    }
    if ($('#linkTesting').hasClass('current')==true)
    {
        $('#testingFocus').focus();
    }
    if ($('#linkRemediation').hasClass('current')==true)
    {
        $('#remediationFocus').focus();
    }
    if ($('#linkContact').hasClass('current')==true)
    {
        $('#contactFocus').focus();
    }
};

用于更改页面和标记当前页面的脚本

var FluidNav = {
init: function() {
    $('a[href*="#"]').click(function(e) {
        e.preventDefault();
        if($(this).attr("href").split("#")[1]) {
            FluidNav.goTo($(this).attr("href").split("#")[1]);
        }
    });
    this.goTo("home");
},
goTo: function(page) {
    var next_page = $("#"+page);
    var nav_item = $('nav ul li a[href=#'+page+']');
    $("nav ul li").removeClass("current");
    nav_item.parent().addClass("current");
    FluidNav.resizePage((next_page.height() + 40), true, function() {
         $(".page").removeClass("current"); next_page.addClass("current"); 
    });
    $(".page").fadeOut(500);
    next_page.fadeIn(500);
    document.activeElement.blur();
    $('#'+page+'Focus').focus();
    FluidNav.centerArrow(nav_item);
},
centerArrow: function(nav_item, animate) {
    var left_margin = (nav_item.parent().position().left + nav_item.parent().width()) + 24 - (nav_item.parent().width() / 2);
    if(animate != false) {
        $("nav .arrow").animate({
            left: left_margin - 8
        }, 500, function() { $(this).show(); });
    } else {
        $("nav .arrow").css({ left: left_margin - 8 });
    }
},
resizePage: function(size, animate, callback) {
    if(size) { var new_size = size; } else { var new_size = $(".page.current").height() + 40; }
    if(!callback) { callback = function(){}; }
    if(animate) {
        $("#pages").animate({ height: new_size }, 400, function() { callback.call(); }); 
    } else {
        $("#pages").css({ height: new_size }); 
    }
}
};
 $("nav select").change(function() {
    if(this.options[this.selectedIndex].value != "#") {
        var page = this.options[this.selectedIndex].value.split("#")[1];
        FluidNav.goTo(page);
        $("html,body").animate({ scrollTop:$('#'+page).offset().top }, 700);
    }
});

有什么想法吗？

听起来您正在尝试执行"动态跳过"，即在运行时确定目标？

<a href="" onClick="javascript:skipNav()" tabindex="1" id="skipNav" role="link">Skip Navigation</a>

问题是当您单击链接时，会发生导航。href=""不会阻止导航，它只是意味着您最终导航到当前页面 - 这将重置焦点。这发生在单击事件处理程序之后。因此，即使您可以正确设置焦点到所需的位置，当页面重新加载时，它最终也会"丢失"。

有几种方法可以防止这种情况：一种是使用 href="javascript:void(0)" - href指定导航的位置，如果评估结果为 void，浏览器根本不会导航。

一种更简洁的方法是告诉浏览器不要在事件处理程序中执行默认操作：

function skipNav(e)
{
    e.preventDefault(); // prevent default action - link navigation - from taking place
    ...

--

代码的其他几个问题：

不要为A上的role="link"而烦恼 - 保存这些属性，以便在您做一些不寻常的事情时。要知道的关键是，当以标准方式使用所有标准HTML元素时，屏幕阅读器已经知道如何处理它们。因此，如果您使用 as 链接或 as 按钮，则无需添加角色。

但是，如果要创建普通 DIV 的新控件，或者要重新调整 HTML 元素的用途以用于其他用途，则需要一个角色属性来告诉屏幕阅读器您实际如何使用该元素。

例如，具有 onclick 处理程序并且行为类似于按钮的 DIV 需要 role="button"，否则屏幕阅读器可能会忽略它或只说一些通用的东西，如"element"。或者，如果您正在从 A 标签创建一个按钮，并且从用户的角度来看，它最终的行为类似于按钮，那么您需要 role="button"，以便屏幕阅读器将其宣布为按钮而不是链接。

--

注意混合普通 DOM 和 jQuery 约定 - 只有 jQuery 使用 # 按 ID 查找元素，因此请使用：

var nav = document.getElementById('skipNav'); // plain DOM way, no #

或

var nav = $('#skipnav'); // jQuery way using selector

--

注意函数作为值与调用：

nav.onclick=skipNav();

这实际上会调用skipNav()，并将返回值 - null！ - 分配给 onclick。设置回调时不要使用 （）。无论如何，您都不需要此代码，因为无论如何您都在标记中使用 onClick 设置处理程序。

另外，请注意，就您的代码而言，当调用 skipNav（） 时，它会尝试调用 document.activeElement.blur（） - 但此时 - 文档仍在加载 - 没有 activeElement，因此在 null 上调用 blur（） 会生成一个异常 - 您应该在浏览器的控制台/调试窗口中看到该异常。

--

不要使用 .blur（） - 没有必要这样做：

 document.activeElement.blur();

相反，只需聚焦您想要聚焦的元素。执行.blur（）的危险在于，如果它之后的代码未能将焦点设置在合理的位置，焦点最终将"丢失"，这对键盘用户来说非常不方便，因为他们必须从页面的开头开始跳牌。

--

Javascript 编码实践：不要在 if（） 表达式中== true烦恼;除非你期望多个元素具有"current"类，否则请使用 else if 而不是普通if：这在代码中清楚地表明你期望只使用一个分支。

--

最后，与浏览器的调试器（大多数为 F12）交朋友：您将通过在事件处理程序和初始化代码中放置断点来学习上述一些内容，并逐步执行它以确保它按预期运行。

相关文章：