样式化图像链接焦点答案

【问题标题】：Styling image link in focus样式化图像链接焦点
【发布时间】：2013-12-15 20:57:16
【问题描述】：

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

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

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

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

它适用于悬停，但不适用于焦点！

有什么想法吗？

【问题讨论】：

标签： css image hyperlink focus

【解决方案1】：

只需将伪类移动到a 元素：

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

【讨论】：

【解决方案2】：

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

:focus 伪类在元素具有焦点时应用（接受键盘事件或其他形式的文本输入）。

您可以通过添加 tabindex 属性 (<img src="foo.png" tabindex="0" alt="photo of foo">) 来启用对 img 元素的关注，但我不建议您这样做，除非您有特定的理由这样做。除非该元素实际上接受键盘输入，否则将其添加到 Tab 键顺序不会对 AT 用户带来任何好处（实际上，可能会令人困惑）。

【讨论】：