样式化图像链接焦点

Posted 2023-03-06

【中文标题】样式化图像链接焦点

【英文标题】：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;

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

有什么想法吗？

【参考方案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 用户带来任何好处（实际上，可能会令人困惑）。