如何为 HTML 中的图像指定替代文本？

在 HTML 中，图像可以通过 <img> 标签来添加。然而，有时候图像在加载失败时，需要显示替代文本。同时，在使用屏幕阅读器时，指定替代文本也可以让用户了解图像的含义。下面将介绍如何为 HTML 中的图像指定替代文本。

alt 属性

要为图像指定替代文本，需要使用 alt 属性。alt 属性用于为图像提供替代文本，以在图像无法加载或被屏幕阅读器读取时显示。

基本用法

<img src="example.jpg" alt="这是一个示例图像">

在上面的示例中，alt 属性的值为 "这是一个示例图像"。这将在以下情况下显示：

• 图像未能成功加载时，显示替代文本。
• 屏幕阅读器读取时，读取替代文本。

适当使用

alt 属性需要包含准确、简明和等效的描述。这有助于防止信息落后或失真。以下是 alt 属性需要遵循的一些准则：

• 对于纯装饰性的图像（例如分割线或背景图像），可以省略 alt 属性。
• 对于描述性的图像（例如地图或流程图），应提供详细的 alt 属性。
• 对于将文本作为图像呈现的情况（例如标志、图标或按钮），应将文本包括在 alt 属性中。

空白 alt 属性

考虑到上述 alt 属性的准则，当图像是纯装饰时，可以省略该属性。在这种情况下，可以使用空白的 alt 属性来提醒屏幕阅读器跳过图像。

以下是使用空白的 alt 属性的示例：

<img src="decorative.jpg" alt="" aria-hidden="true">

在上面的示例中，alt 属性为空字符串，同时使用 aria-hidden="true" 来告诉屏幕阅读器忽略该图像。

总结

指定替代文本是确保图像可访问性的重要部分。通过 alt 属性提供简明的、描述性的替代文本，可以确保信息正确地传达给所有人，无论他们是使用屏幕阅读器还是无法加载图像。