変換のjqueryのクリック機能のコンテンツへスキップする「アクセシビリティリンクについてはangularJSディレクティブ

Question

に、コントローラでこのjqueryのはうまく機能：HTMLは

<a href="#content" class="skip sr-only sr-only-focusable">Skip to content</a> 

ある

$scope.skipLink = $(document).ready(function() { 
    $(".skip").click(function(event){ 
     var skipTo="#"+this.href.split('#')[1]; 
    $(skipTo).attr('tabindex', -1).on('blur focusout', function() { 
     $(this).removeAttr('tabindex'); 
     }).focus(); 
    }); 
    }); 

方法はありますjqueryを使わずにこれをディレクティブに書き直すには？

Answer 1

私の意見では、これはjQueryを使わずに行うべきだとは思わない。しかし、もっと角度にやさしくするためには、THIS DEMOを参照してください。

考え方は、角度からのクリックハンドラディレクティブを活用して、jQueryをコントローラ内で動作させることです。

AngularJSコントローラ

$scope.skipToContent = function() { 
    $("#content").attr('tabindex', -1); 
    }; 
    $scope.removeTabIndex = function() { 
    $("#content").removeAttr('tabindex'); 
    }; 

HTML

<a href="#content" 
    ng-click="skipToContent()" 
    class="skip sr-only sr-only-focusable">Skip to content</a> 
<input id="content" 
     ng-blur="removeTabIndex()" 
     style="display: block; margin-top:100vh;"/> 

Answer 2

最も簡単な方法は、コンテンツのdivに属性tabindexを設定することで、まったくJavaScriptを使用しないことです。

<a href="#content" class="skip">Skip to content</a> 

<div id="content" tabindex="-1" onclick="return false"> 
    This is my content 
</div> 

それは非視覚障害（キーボードのユーザー、パーキンソン病、...）を持つ人々によって使用することができる「コンテンツにスキップ」リンクは、すべてのユーザーに対して非表示にするべきではないことに注意してください。