<!-- all of these choices lead to the same result. -->
<img src=".../ladybug.jpg" role="presentation">
<img src=".../ladybug.jpg" role="none">
<img src=".../ladybug.jpg" aria-hidden="true">
如有疑问,请为图像添加描述。
空或 null alt
不要将图像 alt 属性设置为“”,除非图像纯粹是装饰性的。
attribute
example
screen reader behavior
use case
alt="" (empty)
ignores the image completely
decorative or non-informative images
missing alt
may read the filename/url
not recommended; implies negligence
信息丰富的图像
如果图像传达概念、想法或情感,您应该包含描述图像用途的程序化替代文本。
尽可能添加非常详细的图像描述。
例如
<img src=".../ladybug_swarm.jpg" alt="a swarm of red ladybugs is resting
on the leaves of my prize rose bush.">
<img src=".../ladybug_anatomy.svg" alt="diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">learn more about the anatomy of a ladybug</a>
将 aria-scribedby 属性附加到 元素,然后将图像链接到包含较长描述的 id。例如
<img src=".../ladybug_anatomy.svg" alt="diagram of the anatomy of a ladybug."
aria-describedby="description">
<p id="description">in this course, you will learn more about the
anatomy of a ladybug, including the head,
antenna, eye, pronotum, elytra, leg, abdomen, and wing.
</p>
将简短的替代描述与较长的描述分组是使用 和 元素。例如
<figure role="group">
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a
ladybug.">
<br><br>
<figcaption>
<a href="ladybug-science.html">Learn more about the anatomy of a
ladybug</a>
</figcaption>
</figure>