如何突出显示缺少替代文本的图像，仅CSS

Question

对于Accessibility，，我们需要知道多少个带有alt标签的图像，而没有多少个？是否可以通过CSS处理？

Answer 1

我们使用img：not（[alt]）轻松突出显示图像而没有alt文本。

img:not([alt]) {
 border:10px solid red;
}

Answer 2

您可以使用css counter()进行计数。问题是，您将can't添加:: before到img中，因此您需要添加span（或任何其他可以计数的元素）并将其结构在一起。然后，您可以触发：not（[alt]）伪选择器。

摘要：

body {
  counter-reset: image;
}
img {width: 25%; height: 100px;border: 1px solid black; margin: 5px;}
img:not([alt]) + span::before {
  counter-increment: image;
  content: "No alt #" counter(image);
  position: absolute;
  background: red; color: white;
  
}

<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>

<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" ><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>
<img src="#" alt=""><span></span>

注意，如果有一个空的alt或alt=""甚至alt=" "（包含空格），它将不会被捕获并且将无法访问（失败的可访问性测试）。

[您需要使用js捕获所有实例，然后根据需要使用CSS（：