Question

因此对于图片，有一个alt属性可以告诉无法查看图片的人。

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

我如何告诉屏幕阅读器“嘿！这是个骰子”。

Answer 1

我如何告诉屏幕阅读器“嘿！这是个骰子”。

通常来说，您不会（尽管可以使用aria-describedby）。

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

完全是装饰性的，因此不需要替代文本，因为它不会首先传达信息或
传达的信息不是“这是骰子”，例如“此链接指向游戏类别中的文章”

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

然后您有许多选择，例如：

使用真实图像。使用CSS创建图像是一个聪明的技巧，但这是一种技巧，确实有缺点。
以文本形式和图形形式提供信息。另外，这对于不依赖屏幕阅读器但难以解释图标的人很有帮助。
使用aria-label

Answer 2

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

您可以将其与<figcaption>元素一起使用以显示可见的字幕。如果您使用Bootstrap并不想看到它，则可以使用.sr-only（仅限屏幕阅读器的类）。

您还可以使用全局属性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>

但是我不知道在可访问性方面哪一种是最语义或最恰当的方式。

Answer 3

亲爱的，您可以使用工具提示

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

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

3 个答案: