辅助功能 - 触发悬停和重点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按键

回答

相关问题