使用CSS创建具有无障碍性的图像作为首字下沉。

Question

有很多在线指南可以解释如何在HTML和CSS中使用首字下沉，例如https://css-tricks.com/snippets/css/drop-caps/（它们通常需要一些注意事项以不破坏屏幕阅读器的可访问性，例如将单词“Carol”分成“C arol”）。

但是我找到的所有在线指南都只讨论如何样式化:first-letter，例如更改其字体、向左浮动等。

我的设计师要求我创建一个图像化的首字下沉，而不仅仅是不同的大小/字体。

我的第一次尝试是这个：

<p><img src="c.jpg" alt="C" style="float: left;">arol

但是屏幕阅读器会将其读作两个单词，“C arol”，而不是一个单词“Carol”。

最好的处理方法是什么？

- Dan Fabulich

---

你需要添加到HTML中吗？你可以将首字母的颜色设置为透明，并将图像作为背景图像放置在首字母中，这样屏幕阅读器就不会受到任何影响。 - A Haworth

Answer 1

你可以利用首字母伪元素可以设置背景图像的事实，并将首字母本身设置为透明，这样它就不会被看到，但屏幕阅读器不应该注意到，因为基本的HTML保持不变。

p.dropcapimg::first-letter {
  background-image: url(https://istack.dev59.com/WecKn.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-center: center center;
  float: left;
  font-size: 6rem;
  line-height: 0.65;
  color: transparent;
  margin-right: -0.15em;
}

<p class="dropcapimg">Carol a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text now a lot of text
  now a lot of text now a lot of text now </p>

显然，根据实际图像大小，您需要进行调整。

- A Haworth

Answer 2

无论如何，您都无法将alt中的“C”和接下来的“arol”组合成一个单词，以便屏幕阅读器将其视为单个单词。这是不可能的。您可以使用aria-label，但由于它不在交互式元素上，因此可能无法在所有地方起作用，并且必须小心不要替换整个段落。

一种可能性是使用视觉隐藏文本和aria-hidden的组合，例如：

<p>
<span aria-hidden="true"><img src="C.jpg"/>arol</span>
<span class="sr_only">Carol</span>
normal text following
</p>

其中，.sr_only是一个特殊的类，将文本发送到屏幕之外，这样你就看不到它了，但屏幕阅读器可以。Bootstrap就提出了这样的一个类。

请注意，使用图像作为首字母装饰不仅对于屏幕阅读器用户来说是个坏主意，正如你已经注意到的那样，对于部分视力受损的人来说也是如此，因为它会阻止他们正确缩放（由于调整大小的伪影）或根据自己的需求调整文本颜色。 这对于SEO来说也可能是个坏主意，因为名字“Carol”可能无法像纯文本一样被索引。 对于受限连接，图像也可能比具有很大机会在许多网站上重复使用的字体更大（因此已经下载）。 实际上，只有缺点。

- QuentinC

Answer 3

我的方法是使用aria-hidden=true插入<img>，这样屏幕阅读器就会忽略它，并使用visibility: hidden样式来修饰第一个字母，使其在视觉上读作一个单词。

p img {
    float:left;
}
p::first-letter {
    visibility: hidden;
}

<p><img src="https://freesvg.org/img/ryanlerch-Decorative-Letter-Set-4.png" height="50" width="50" aria-hidden="true">Carol</p>

- Dan Fabulich

---

visibility: hidden 会使元素对屏幕阅读器也不可见，所以我认为这种方法将被读作"Arol"。 - Sean