如果通过 CSS 满足条件，则在图像顶部添加文本

Question

提前感谢您的帮助。这就是我想要做的。我正在创建一个自定义 CSS 以在检查网页是否存在可访问性问题时使用。其中一个问题是没有替代文本（描述）的图像。无障碍阅读器在向视障者描述图像时使用替代文本。

我已经成功创建了一个条件，其中使用棕褐色调过滤图像以突出显示它缺少替代文本。但我也想将文字放在图片旁边，或者最好放在图片上方，说明“缺少替代文字”

这是我目前所拥有的：

/* Locates images missing an Alt-Text */

img[alt=""] {filter: sepia(100%);}

img[alt=""]:after{
  content: "Image is missing an Alt text. ";
    color: black;
} 

颜色有效，但在图像后添加文本无效。有任何想法吗？ 谢谢！

Answer 1

伪元素::before 和::after 仅适用于可以包含内容的元素（flow and phrasing elements 带有结束标签（例如<b></b>））<img> 是void element（即没有结束tag) 因此无法将所述伪元素用于<img> 标记。正如@Kaiido 所评论的那样，带有结束标签不包括在内，replaced elements 也不能有伪元素（例如<video></video>、<textarea></textarea>、<iframe></iframe> 等）。

要通过 CSS 实现目标，您必须做三件事：

1. 在每张图片之后立即添加适当的元素。任何带有结束标签的元素都可以。

2. 如果您还没有将alt="" 添加到每个<img>。

3. 将以下规则集添加到您的 CSS：

   img[alt=""]+b::after { content: "Image is missing an Alt text.";...
   

   这被解释为：

   “紧跟在<img alt=""> 之后的所有<b> 标记都将包含文本， “图像缺少替代文本。”在它拥有的任何内容之后。”

演示

img {
  display: inline-block;
  width: 20vw
}

img[alt=""] {
  filter: sepia(100%);
}

img[alt=""]+b::after {
  content: "Image is missing an Alt text.";
  display: inline-block;
  position: relative;
  z-index: 1;
  right: 20vw;
  width: 20vw;
  font-size: 0.75rem;
  color: #930;
}

<img src='https://i.ibb.co/hZj77BZ/lena01.jpg' alt=""><b></b>
<img src='https://i.ibb.co/7XxsBr5/lena02.png' alt=""><b></b>
<img src='https://i.ibb.co/X7SCb3w/lena03.png' alt=""><b></b>

Answer 2

认为在评论指出我的原始解决方案与 IE 和 FireFox 不兼容之后，将其添加为第二个答案会更整洁。

如果您知道相关图像的宽度和高度，则以下是跨浏览器和有效的 CSS。

基本上，我们通过将原始图像设置为 0 高度来隐藏原始图像，然后在底部添加与高度相同的填充，以允许 background-image 显示。

这种方法的缺点是，对背景尺寸使用“封面”选项意味着不同的纵横比会导致图像被截断，因此您需要提供一个可以解决“缺少 alt 标签”的图像，并且'alt tag empty' 纵向和横向图像（或使用tile 并使图像变小）。

img{
  width:200px;
  height: 200px;
}


img:not([alt]) {
  width: 200px;
  height: 0;
  padding: 0 0 200px 0;
  outline: solid 5px red;
  outline-offset: -5px;
  background-image: url(https://freesvg.org/img/molumen_red_square_error_warning_icon.png);
  background-size: cover;
}


img[alt=""]{
  width: 200px;
  height: 0;
  padding: 0 0 200px 0;
  outline: dashed 5px red;
  outline-offset: -5px;
  background-image: url(https://www.publicdomainpictures.net/pictures/250000/nahled/erorr.jpg);
  background-size: cover;
}

<img src="https://via.placeholder.com/150" alt="">

<img src="https://via.placeholder.com/150">

<img src="https://via.placeholder.com/150" alt="Great alternative text">

最好的解决方案是首先阻止人们添加具有空 alt 属性的图像作为编辑器的一部分（并给他们一个复选框来说明该图像是装饰性的，如果您需要提供装饰图像的选项，则允许空的alt 属性。

Answer 3

编辑 - 此解决方案仅适用于 chrome / webkit 浏览器，因为评论指出它是一个 hack。有关跨浏览器解决方案，请参阅我的其他答案。

虽然这无法使用文本，但可以将图像替换为另一个图像，从而强制您的用户填写替代文本（您可以在编辑器的其他地方进行解释）。

这将提供图像没有alt 属性的视觉线索。

加上边框，你就有了赢家。

在下面的示例中，我进行了设置，以便替换缺少 alt 属性的图像并具有 5 像素的“边框”（我使用 offset，因此它不会破坏文档流）。

我将一个空的alt 属性设置为具有虚线边框（并替换图像，但如果图像可以是装饰性的，这可能适合您的情况，也可能不适合）。

显然这对使用您的软件的屏幕阅读器用户没有帮助，但无论如何这都需要一些 JavaScript，因为对阅读伪文本的支持充其量是不稳定的。

创建一个显示“缺少替代文字”的图像，然后您就设置好了。

显然只在你的后端使用这个 CSS

img{
  width:200px;
  height: 200px;
}

img:not([alt]) {
  outline: solid 5px red;
  outline-offset: -5px;
  content:url("https://www.publicdomainpictures.net/pictures/250000/nahled/erorr.jpg"); 
}
img[alt=""] {
  outline: dashed 5px red;
  outline-offset: -5px;
  content:url("https://freesvg.org/img/molumen_red_square_error_warning_icon.png"); 
}

<img src="https://via.placeholder.com/150" alt="">

<img src="https://via.placeholder.com/150">

<img src="https://via.placeholder.com/150" alt="Great alternative text">

Answer 4

img[alt=""] {
  filter: sepia(100%);
  position: relative;
  z-index: 1
}

img[alt=""]:after{
  content: "Image is missing an Alt text. ";
  color: black;
  position: absolute; 
  top: 0px;
  left: 0px;
  z-index: 10
}