こんにちは:フォーカス見える!

フォーカス表示は、簡単にデザインで無視されているものの一つです.多くの設計者はまた、デフォルトでシステムの設定でフォーカスインジケータが無効になっているMacを使用します.
過去数年で、アクセシビリティはゆっくりであったが、確実にコミュニティでブレークスルーを得て、適切に焦点州のためのスタイリングが成長していました.
過去の週末の間、クロムの新しいリリースは出ました.そして、Chrome、端を意味します、そして、バージョン86のすべての他のクロムベースのブラウザーは現在:focusを支持します.これは素晴らしいことです、Firefoxが初めて2011年に:focus-visibleを導入して以来、初めてスタイリングにアクセスできるフォーカスの実用的な進歩がありました!

違い-moz-focusringスタイルはかなり簡単です:それがキーボードアクセスの現在のアクティブなターゲットであるなら、要素の表示焦点指示.問題は、マウスまたは指でそれらをクリックするとき、それがしばしば要素にフォーカス表示を表示することを望まないということです.しかし、フォーカスの表示を削除する場合は完全にあなたのアプリケーションをキーボードで使用するのは非常に難しい、あなたはどの要素がアクティブなものであるかわからないので.:focusは:focus-visibleのようです、しかし、ブラウザーヒューリスティックがユーザーがキーボードを使っているのを発見するならば、スタイルは活発です、そして、このように、焦点インジケータは表示されなければなりません.これは、我々はフォーカスのインジケータを持つことができますので、これは素晴らしいですが、要素をクリックするときにそれを参照する必要はありませんが、非常に見えるスタイルを持っている!

弱く強い
私の提案は、デフォルトでは、:focusスタイルでもフォーカス表示をする必要がありますが、それは:focusで使用されるものよりも強いことができます.適切なフォールバックでは、:focus-visibleをサポートしていないブラウザーに対してのみ使用されます.そうすれば、人々は新しいブラウザーに移動するので、単にタップしたり、要素をクリックするときにフォーカス表示を見ることはありません.

実装
私たちは:focusを使うことができないので、ブラウザがそれを理解しないなら、CSSが無視される伝統的なオーバーライドに従わなければなりません.

/* you don't need to use CSS variables if you don't like */
:root {
    --focus-color: Highlight;
    --focus-color: -webkit-focus-ring-color;
}

/* apply weak focus indication */
a:focus {
    outline: thin dotted var(--focus-color);
    outline-offset: 1px;
}

/* disable weak focus in browsers which support focus-visible */
a:not(:-moz-focusring) { outline: none; }
a:not(:focus-visible) { outline: none; }

/* apply strong focus indication */
a:-moz-focusring {
    outline: medium solid var(--focus-color);
    outline-offset: 2px;
    -moz-outline-radius: 6px;
}
a:focus-visible {
    outline: medium solid var(--focus-color);
    outline-offset: 2px;
}

:focus-visibleをサポートしていないブラウザでは、各要素がフォーカスを持っているたびに点在する1ピクセルのアウトラインが表示されます.一方、ブラウザをサポートするときには、非常に注目されるフォーカス表示が表示されます.

結論@supportsに移行を開始する時間は今です!JavaScriptベースの実装を削除する計画を始めることができます.
今ちょうどクロムがsupport rounded corners on outline .Firefoxは、非標準のベンダプレフィックスを通しても、非常に長い間、してきました.しかし、それはそれをサポートしています.ボックスシャドウを使用して丸めフォーカスリングを行うことはハックです.