我正在尝试改善样式表中缺少“焦点”的WordPress网站上的可访问性。

我了解如何设置文本链接的样式,但似乎无法将其应用于图像链接。对焦时,我想在图像下方画一条虚线。

这就是我所说的-非常简单:

a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}


它适用于悬停,但不能专注!

有任何想法吗?

最佳答案

用户代理通常不将img元素视为接受焦点。从the w3 CSS spec


  :focus伪类适用于元素具有焦点的情况
  (接受键盘事件或其他形式的文本输入)。


您可以通过添加tabindex属性(img)来启用对<img src="foo.png" tabindex="0" alt="photo of foo">元素的关注,但是除非您有特定的理由,否则我不建议您这样做。除非该元素实际接受键盘输入,否则将其添加到制表顺序不会给AT用户带来任何好处(并且确实可能​​造成混淆)。

10-07 19:08
查看更多