欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。
今天我们介绍的内容是为视觉障碍用户添加替代图像的文本。在前面的文章里你应该已经见到过 img 标签的 alt 属性了。在 HTML 代码中使用替代文本，也称为“替代属性”或“替代描述”，用于描述页面上图像的外观和功能。1、网站可访问性的首要原则是在图片上添加替代文本。使用屏幕阅读器的视障用户将读取 alt 属性的文本描述信息，以更好地理解页面上的图像内容。2、如果无法加载图像文件，将在图像的位置显示 alt 标签设置的文本描述内容。3、alt 标签为搜索引擎搜提供了更好的图像描述信息，帮助他们正确地索引图片。<img src="iCodeRoadLogo.png" alt="公司 logo 信息">
注意：alt 属性的值最多可以包含 1024 个字符的字符串，其中包括空格和标点。这个字符串必须包含在引号中。alt 文本中可以包含对特殊字符的实体引用，但它不允许包含其他类别的标记，尤其是不允许有任何 HTML 标签。让我们以下图为例，比较不同 alt 属性的例子如下所示：好的 alt 替代文本: <img src="html02-alt-tag-image.png" alt="公鸡">较好的 alt 替代文本: <img src="html02-alt-tag-image.png" alt="公鸡啼叫">最佳的 alt 替代文本: <img src="html02-alt-tag-image.png" alt="红冠公鸡正在啼叫">视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。屏幕阅读器可以识别 alt 属性，朗读其中的内容，来告知用户图片包含的关键信息。良好的 alt 文本可以简明扼要地描述图片信息，所以你应该为图片添加 alt 属性。另外，HTML5 标准也在考虑强制要求对图片添加 alt 属性。在文章 “无障碍网页设计：「01」无障碍网页设计简介” 框架基础上，在模块 1 部分增加红冠公鸡正在啼叫图片，设置最佳替代文本，具体代码如下所示：<article class="article ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6">
<div class="card">
<p>红冠公鸡正在啼叫</p>
<img src="../images/html02-alt-tag-image.png" alt="红冠公鸡正在啼叫">
</div>
</article>
为了查看图片加载失败时显示 alt 属性替代文本，可以将 html02-alt-tag-image.png 图片名修改为不存在的文件名，页面上会显示相应的提示文件，如下图片所示
为了页面的美观性，将模块 1 的图片设置为正常显示的红冠公鸡正在啼叫的图片。重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
