移动 APP 中的无障碍设计之图片打标标记解析

随着人们对无障碍设计的重视，越来越多的移动 APP 开始注重如何为视觉障碍人士提供相应的服务。图片打标标记是无障碍设计中的重要环节之一，本文将详细讲述其原理与实现方法，希望能给前端开发人员带来一些启示。

什么是图片打标标记

图片打标标记（Image Labeler）是一种无障碍设计方法，即通过文字标记等方式为图片添加额外的描述信息，方便视觉障碍人士能够获取到图片的有关信息和内容。一般来说，图片打标标记可以包括以下三个方面：

1. 图片标题（Title）：图片的主要名称或概述。
2. 图片描述（Description）：对图片的详细描述或补充说明。
3. 替代文本（Alternative Text）：用于在图片无法显示或无法加载时，为用户提供文本替代信息。

通过这些标记，视觉障碍人士就可以通过屏幕阅读器等工具来获取有关图片的相关信息。

如何实现图片打标标记

在 HTML 中，可以通过 alt 属性来定义图片的替代文本信息，如下所示：

<img src="image.png" alt="这是一张图片" />

但是仅使用 alt 属性是不够的，因为它只提供了图片的简要描述信息。为了为视觉障碍人士提供更多的信息和体验，我们需要使用更为详细的标记，如下所示：

<figure>
  <img src="image.png" alt="这是一张图片" />
  <figcaption>
    <h2>这是一张图片标题</h2>
    <p>这是对图片的详细描述</p>
  </figcaption>
</figure>

其中，figure 标签用于包裹图片和其描述信息，figcaption 标签用于定义图片描述信息，h2 标签用于定义图片标题，p 标签用于定义图片的详细描述。这样，视觉障碍人士就可以通过阅读工具来获取有关图片的信息了。

为了实现更好的无障碍体验，我们还需要注意以下几点：

1. 设置正确的 alt 属性：确保 alt 属性提供了图片的正确名称或描述信息。
2. 提供清晰、简明的标题和描述信息：标题和描述信息应当简介明了，避免过于冗长。
3. 正确使用标记：确保标记的嵌套关系正确，不要在不正确的地方使用标记，如在标题中使用 figure 标签。

示例代码

下面是一个完整的图片打标标记示例代码：

<figure>
  <img src="image.png" alt="这是一张图片" />
  <figcaption>
    <h2>这是一张图片标题</h2>
    <p>这是对图片的详细描述</p>
  </figcaption>
</figure>

总结

随着无障碍设计的逐渐普及，图片打标标记越来越受到重视。通过为图片添加标题、描述信息和替代文本，我们能够为视觉障碍人士提供更好的无障碍体验。前端开发人员应当充分了解图片打标标记的原理和实现方法，并在开发移动 APP 时尽可能地增加其无障碍设计性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4aa98f6b2d6eab3021968