如何描述使用 CSS 创建的图像？

Question

所以对于图像，有 alt 属性来告诉不能查看它的人它是什么。

如果我有一堆 div 以创建图像的方式设置样式怎么办？（就像一堆使用 CSS 透视和变换样式看起来像骰子的 div）。

如何告诉屏幕阅读器 "Hey! this is a dice"。

Answer 1

亲爱的你可以使用工具提示

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); 
});
</script>

Answer 2

How do I tell screen readers that "Hey! this is a dice".

一般来说，您不需要（尽管您可以使用 aria-describedby）。

在大多数情况下，图像将是：

完全是装饰性的，因此不需要替代文本，因为它首先不传达信息或
正在传达 "This is a dice" 以外的信息，例如 "This link points to an article in the games category"

因此您需要考虑您要传达的信息。

那么您有多种选择，例如：

使用真实图像。使用 CSS 创建图像是一个聪明的 hack，但它确实有缺点。
以文本形式和图形形式提供信息。作为奖励，这对不依赖屏幕阅读器但难以理解图标的人很有帮助。
使用 aria-label

Answer 3

我不太了解可访问性，但也许可以使用 <figure> 元素？

您可以将它与 <figcaption> 元素一起用于可见标题。如果您使用 Bootstrap 并且不希望它可见，您可以使用 .sr-only（仅屏幕阅读器 class）。

您也可以使用全局属性 title。

示例：

<figure>
  <!-- your div elements with CSS here -->
  <figcaption>Hey, this is a dice!</figcaption>
</figure>

带有隐形描述（使用Bootstrap）：

<figure>
  <!-- your div elements with CSS here -->
  <figcaption class="sr-only">Hey, this is a dice!</figcaption>
</figure>

使用 title 属性。

<figure title="Hey, this is a dice!">
  <!-- your div elements with CSS here -->
</figure>

但我不知道在可访问性方面哪个是最语义化或最正确的方式。

如何描述使用 CSS 创建的图像？

How do I describe an image created using CSS?

html

accessibility

semantic-markup