我正在尝试改善样式表中缺少“焦点”的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用户带来任何好处(并且确实可能造成混淆)。