オーバーレイ効果はマウスでは機能しますが、キーボードでは機能しません。

Question

これは私の問題です。私はポートフォリオページを構築しています。今はマウスを使用できない人のためにナビゲートするのが簡単になりたいのです。

アウトラインプロパティは何をしますか？ TAB キー（または同等のもの）を使用してWeb文書をナビゲートするときに、フォーカスがある リンクの視覚的なフィードバックを提供します。これは特に マウスを使用することができないか、視覚障害がある人に有効です。アウトラインを削除すると、 になり、これらの人々はあなたのサイトにアクセスできなくなります。

あなたがTABキーを使って自分のページ上のすべてのリンクをナビゲートすることができますし、ENTERキーを使用してそのリンクを開くことができますので、私はそれを建てました。

しかし...

私はオーバーレイで素晴らしい視覚効果があります。あなたはアプリの画像を見ることができ、その画像の上にマウスを置くとリンクを見ることができます。

だからTABが動作していて、キーボードを使用してリンクを選択できますが、そのオーバーレイ効果はマウスでのみ有効です（特定の画像の上にマウスが移動している間）。

それは言葉で説明するのは難しいので、私は短いビデオ記録： https://youtu.be/IQbXL7iyG6w?t=5

任意のアイデアはどのようにこの問題を解決するために？オーバーレイエフェクトは、TABナビゲーションでも起動する必要があります。

GitHubのコード： https://github.com/elminsterrr/portfolio

Answer 1

あなたは、簡単なjqueryのコードでこれを行うことができます。

#portfolio .inner-content:hover .overlay-content { 
    top: 0px; 
    z-index: 1; 
    background: rgba(0,0,0,0.9); 
} 
#portfolio .inner-content .overlay-content.focus_test{ 
    top: 0px; 
    z-index: 1; 
    background: rgba(0,0,0,0.9); 
} 

jQueryの：と

#portfolio .inner-content:hover .overlay-content { 
    top: 0px; 
    z-index: 1; 
    background: rgba(0,0,0,0.9); 
    transition: all 0.5s ease-out; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
} 

：

$('.overlay-content p a').focus(function(){ 
    $(this).parents('.overlay-content').addClass('focus_test'); 
    }); 
    $('.overlay-content p a').blur(function(){ 
     $(this).parents('.overlay-content').removeClass('focus_test'); 
    }); 

Answer 2

要素がフォーカスされ得るので、あなたが表示するあなたのオーバーレイのためにあなたのCSSに:focusセレクタを追加する必要がTABを使用するときは、:hoverであなたのオーバーレイを示しています。

.my-class:hover .my-overlay { ... } =>.my-class:focus .my-overlay, .my-class:hover .my-overlay { ... }