クリックするとリンク上の青い枠線を削除しますが、TAB選択（アクセシビリティ）の概要を保存してください

Question

私はTABで選択可能なバーガーメニューボタンを持っています。私がそれをクリックするとメニューが開き、ハンバーガーにはこの青い輪郭があり、それが焦点を当てていることがはっきりしています。 私は青い輪郭を削除したくないのは、視覚障害のある人に役立つからです。また、タブを選択することもできますが、マウスでクリックすると青い輪郭を削除するスマートな方法があります。ちょうど無気力...

あなたの答えをありがとう。

歓声

Answer 1

さてあなたはこのようにそれをやってみたいことがあります。

div:active, div:focus{ 
    outline: none; 
    border: none; 
} 

、多分：

*{ 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
} 

Answer 2

私が正しく質問を理解している場合、試してみてください。

.myButton:active {outline: none;}

Answer 3

JS：

$('#element').click(function(){ 
    $(this).addClass('mouse'); 
}); 
$('#element').blur(function(){ 
    if($(this).hasClass('mouse'){ 
    $(this).removeClass('mouse'); 
    } 
}); 

CSS：あなたが指摘したように

.mouse{ 
    outline: none; 
} 

Answer 4

、青のアウトラインは、アクセシビリティ上の理由からここにあります。

要素をクリックすると、キーボードフォーカスもその要素に移動します。

ユーザは、キーボードのフォーカスがその要素に移動したことを知る必要があります。

障害を持つ一部の人々は、マウスを使用して特定のタブにジャンプすることができますが、そのためにキーボードを使用するのは簡単です。

Answer 5

は、ここでこの答えは、@クバの回答に似ているバックIE 10

に働く平野JavaScriptでシンプルなソリューション、です。 JSを使用してマウスクリックまたはタブボタンを検出するためにクラスを追加/削除します。

のjavascript：

html.clicking .targetElement:focus { 
    outline: none; 
} 

/* 
    or you can try dealing with all visibly focusable elements from the start. I'm not sure if this is all of them, but it's good starting point. 
*/ 

html.clicking a:focus, 
html.clicking button:focus, 
html.clicking input:focus, 
html.clicking textarea:focus { 
    outline: none; 
} 

ブラウザの互換性：：

querySelector IE 8+
クリッククラスが

CSSが存在するときに、フォーカス：

var htmlElement = document.querySelector('html'); 

document.addEventListener('click', function(){ 
    htmlElement.classList.add('clicking'); 
}); 

document.addEventListener('keyup', function(e){ 
    if (e.keyCode === 9) { 
    htmlElement.classList.remove('clicking'); 
    } 
}); 

はその後にアウトラインをオフにします ​​IE 10+

IE10より前のブラウザをサポートする必要がある場合は、jQueryを使用します。

$(document).on('click', function(){ 
    $('html').addClass('clicking'); 
}); 

$(document).on('keyup', function(){ 
    if (e.keyCode === 9) { 
    $('html').removeClass('clicking'); 
    } 
});