Firefoxでアウトラインが正しく動作しない

Question

いくつかのウェブアクセシビリティの提案に達するためにカスタムアウトラインを作成しようとしています。しかし、私はFirefoxで作ることができません。

これは、Chromeでどのように見えるかです：

そして、そのアイコンは、実際にはアンカーです。 Firefoxのオン

、それだけでこのように、文書全体を概説している：Firefoxのオン

それが文書を概説し、それが再び検索バーに焦点を当てて、次のタブにされています。ここで

あなたがCodepenを見ることができる私がやった：https://codepen.io/maketroli/pen/owRWag

それともコードスニペット：

// This function sets outline on tab and removes it on click 
 
var elArr = Array.from ? Array.from(document.querySelectorAll("a")) : Array.prototype.slice.call(document.querySelectorAll("a")); // Fallback for IE because as usual nothing works there! 
 

 
elArr.forEach(function(a) { 
 
    return a.addEventListener("click", function() { 
 
    $(a).addClass("no-outline").removeClass('custom-outline'); 
 
    }); 
 
}); 
 

 
elArr.forEach(function(a) { 
 
    return a.addEventListener("focus", function() { 
 
    $(a).removeClass("no-outline").addClass('custom-outline'); 
 
    }); 
 
}); 
 
// END

CSSを

.wrapper { 
    margin-top: 50px; 
    display: flex; 
} 

a { 
    border: 1px solid red; 
    padding: 20px; 
    margin-right: 10px; 
} 

.no-outline { 
    outline: 0 !important; 
} 

.custom-outline:focus { 
    outline: 2px dotted blue !important; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
    <a href="#">one</a> 
    <a href="#">two</a> 
    <a href="#">three</a> 
</div> 

いずれかの提案がありますか？

Answer 1

Macを使用していますか？ OS Xには、ウインドウやダイアログのタブキーの動作を変更するシステム全体の設定があります（Chromeはそうしません）。おそらくアンカータグをスキップするテキストボックスのみにタブを設定します。 「フルキーボードアクセス」の

検索システム環境設定、あなたはそれを見つけるか、下のスクリーンショットを参照します：

。

FirefoxをOSX上のChromeのように動作させるには、「すべてのコントロール」に設定します。