1

アンカーを使用できずに「ナビゲーションをスキップ」リンクを作成しようとしています。サイトは独特な方法で構築されており、アンカー リンクのフォーマットが再利用されています。そのため、フォーカスを使用してナビゲーションをスキップできるようにしています。しかし、それは機能していません。

スキップ ナビゲーション リンク自体の 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);
    }
});

何か案は？

4

1 に答える 1

2

実行時にターゲットを決定する「動的スキップリンク」を実行しようとしているように聞こえますか?

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

問題は、リンクをクリックするとナビゲーションが発生することです。Ahref=""はナビゲーションを妨げるものではなく、現在のページに移動してしまうことを意味するだけで、フォーカスがリセットされます。これは、クリック イベント ハンドラーの後に発生します。そのため、目的の場所にフォーカスを正しく設定できたとしても、ページがリロードされると「失われる」ことになります。

これを防ぐ方法はいくつかあります。1 つは使用する方法です。href="javascript:void(0)"ナビhrefゲートする場所を指定し、無効と評価された場合、ブラウザはまったくナビゲートしません。

イベント ハンドラーで既定のアクションを実行しないようにブラウザーに指示するのが、よりクリーンな方法です。

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

--

コードに関する他のいくつかの問題:

気にしないでくださいrole="link"-A通常とは違うことをするときのために、これらの属性を保存してください。知っておくべき重要なことは、スクリーンリーダーは、標準的な方法で使用されている場合、すべての標準 HTML 要素を処理する方法を既に知っているということです。したがって、 をリンクとして、または をボタンとして使用している場合は、ロールを追加する必要はありません。

しかし、単純な DIV の新しいコントロールを作成している場合、または HTML 要素を別の用途に転用している場合は、その要素を実際にどのように使用しているかをスクリーンリーダーに伝えるために role 属性が必要です。

たとえば、onclick ハンドラーがあり、ボタンのように動作する DIV には role="button" が必要です。そうしないと、スクリーンリーダーはそれを無視するか、単に「要素」のような一般的なことを言う可能性があります。または、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 を使用してハンドラーを設定しているため、このコードは必要ありません。

また、コードがそのままの状態で、skipNav() が呼び出されると、document.activeElement.blur() を呼び出そうとすることに注意してください。ただし、その時点では、ドキュメントはまだロード中です。activeElement がないため、blur() を呼び出す必要があります。 null は例外を生成します - ブラウザのコンソール/デバッグ ウィンドウに表示されます。

--

.blur() を使用しないでください - これを行う必要はありません:

 document.activeElement.blur();

代わりに、フォーカスしたい要素にフォーカスしてください。.blur() を実行する際の危険性は、その後のコードが適切な場所にフォーカスを設定できなかった場合、フォーカスが「失われて」しまうことです。これはキーボード ユーザーにとって非常に不便です。ページ。

--

== trueJavascript コーディングの実践: if() 式を気にしないでください。また、複数の要素が「現在の」クラスを持つことが予想される場合を除きelse if、plain の代わりに使用ifしてください。これにより、1 つのブランチのみが使用されることをコード内で明確にできます。

--

最後に、ブラウザーのデバッガー (ほとんどの場合 F12) に慣れてください。イベント ハンドラーと初期化コードにブレークポイントを配置し、期待どおりに動作することを確認するためにステップ実行することで、上記のいくつかを学習します。

于 2012-06-12T07:18:25.007 に答える