无障碍设计之如何让视障人群无须切换文本与图片
随着数字化时代的到来，越来越多的信息在互联网上得以传播。但是，对于视障人群来说，这些信息的获取难度却很大。设计无障碍网站是一项良好的举措，让每个人都能够得到信息。本文将探讨如何通过无障碍设计让视障人群无须切换文本与图片。
- 文本内容易于理解
在文本内容上要求易于理解，尽量使用简单易懂、容易记忆的语言。特别是对于照片、表格和图表等图片的说明，需要有简明易懂的文字来描述图片的含义和内容。当屏幕阅读器读取网站时，这些文字将作为替代性文本显示。
- 使用“alt”标签
在标签中，通过添加“alt”属性，可以为图片提供文字说明。在无法加载图片时，阅读器将读取“alt”属性中的文本，为用户提供图片内容的描述。这个技巧即使在网络速度较慢或者在没有图像的情况下也是很实用的。
示例代码：
<img src="image.jpg" alt="这是一张奶牛在田野上吃草的照片">
例如，在这个代码中，如果图像无法加载，则阅读器将提示用户，“这是一张奶牛在田野上吃草的照片”。
- 使用文本和图像
对于需要说明的内容，应该同时使用文本和图像。这对于有视力障碍的人来说是非常有用的，因为他们能够通过阅读文本了解图像的含义。同时，我们可以使用CSS来让页面更具有吸引力，并使图片更具体。
示例代码：
<p> 这是一个<span class="icon" aria-hidden="true">👍</span>，表示你已经完成该任务。 </p>
在这个代码中，我们使用了Span标签并添加了一个名为“icon”的CSS类，使图表更加生动。
- 避免文本与图片的重叠
当重叠文本和图片时，屏幕阅读器难以处理。在布局时，应该把图片和文本划分到不同的区域中，从而确保阅读器能够确定用户感兴趣的内容，并进行正确的解读。如果需要在文本中插入图片，可以通过了解HTML和CSS排版技术来实现，使文本和图片分开处理。
- 明白是否已经錄制好網路課程的描述文字
对于視障人群来说，通过语音提示是否录制完成的描述文字是不够的，因为他们不能听到。因此，我们应该在页面中添加一个特殊标记，如图标或颜色信号，来表示是否完成录制。
示例代码：
<span class="record" aria-label="已完成录制"> <i class="material-icons">check_circle_outline</i> </span>
在这个代码中，我们使用了一个Span标签，并添加了一个名为“record”的CSS类，通过颜色和Material Icon图标表达“已完成录制”的状态。
结论
通过这些技巧，我们可以让网站更加易于理解和使用，更加符合视障人群的需求。在设计无障碍网站时，我们应该考虑如何让信息更加丰富、精确，文本和图片的处理更加规范，更容易让人理解。
参考资料：
- The ARIA Role Model: How to Use ARIA Roles to Make Accessible HTML Code
- How to Use MDN's ARIA Glossary to Make Your Web Content More Accessible
- The ARIA Authoring Practices Guide to Make Your Website Accessible to Everyone.
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3e66bf40ec5a964e5b232