輔助功能 - 觸發懸停和重點TAB按鍵

事件我在簡單的CSS轉換已經涉足最近懸停事件等。我注意到，當你按TAB鍵時，它通常會發現鏈接很好，但是...輔助功能 - 觸發懸停和重點TAB按鍵

如果我有一個懸停事件，就像顯示一段文字或類似的東西，我如何確保按下TAB鍵會觸發懸停和/或焦點事件？

這是因爲我有一個頁面充滿了類似於這樣組成的DIVs廣場：

當你將鼠標懸停在您的鼠標在此塊是通過懸停事件改變顏色，基本上在視覺上通知用戶該元素以某種方式交互。

有沒有一種方法，我可以觸發與TAB鍵，甚至方向鍵懸停事件？我的推理是因爲如果由於某種原因，您沒有鼠標或觸控設備，您可能會錯過內容。

修訂我的問題稍微

所以TAB鍵被視爲:focus事件，效果很好，當你給一個鏈接:hover狀態，但有可能是TAB鍵來確認DIV元素？

來源

2017-03-16 Jesse Orange

'：focus'？你嘗試過什麼嗎？ – DaniP

我打算嘗試將TAB鍵上的keydown事件綁定到焦點事件，但我不確定這是否過度殺傷？ –

使用CSS，你也可以用:focus，試試這個：

div { 
 
    float:left; 
 
    margin:2px; 
 
} 
 
a { 
 
    display:block; 
 
    height:100px; 
 
    width:100px; 
 
    line-height:100px; 
 
    text-align:center; 
 
    background:purple; 
 
    color:white; 
 
    transition:.3s linear; 
 
} 
 
a:hover, a:focus { 
 
    background:orange; 
 
}

<div><a href="">item1</a></div> 
 
<div><a href="">item2</a></div> 
 
<div><a href="">item3</a></div> 
 
<div><a href="">item4</a></div> 
 
<div><a href="">item5</a></div>

來源

2017-03-16 14:56:01 DaniP

這是關於你的最後的評論：

所以TAB鍵被視爲一：焦點事件和效果很好，當你給一個鏈接：懸停狀態，但有可能TAB鍵來確認DIV元素？

我相信你在找tabindex="0"。添加該屬性將使您的元素能夠獲得焦點。

所以

的tabindex沒有有爲0。它可以是負的，0或以下這些規則獨到之處整數：

從MDN on tabindex

負值意味着元素應該是可聚焦的，但不應該是通過順序鍵盤導航可達;

0表示該元素應該可以通過順序鍵盤導航獲得焦點和可達性，但其相對順序由平臺約定定義爲 ;

積極的價值意味着應該可以通過順序的鍵盤導航來獲得焦點和可達性;其相對順序是由屬性的值定義的：順序遵循tabindex的增加數。如果多個元素共享相同的tabindex，則它們的相對順序將遵循其在文檔中的相對位置。

來源

2017-03-16 15:11:48 zero298

使用積極的tabindex [幾乎總是一個壞主意]（http://webaim.org/techniques/keyboard/tabindex）。在這種特殊情況下，將tabindex添加到非交互元素會降低可訪問性。它什麼都不添加，並可能會混淆用鍵盤導航的用戶。 – steveax

我同意@steveax的**不**使用'tabindex'的正值。 0和-1是您應該使用的唯一值。但我不同意使用'tabindex'作爲非互動元素。讓非互動元素獲得焦點可能會非常有益，並且可以提高可訪問性。但是不談具體的例子，目前不值得討論。 – slugolicious

輔助功能 - 觸發懸停和重點TAB按鍵

回答

相關問題