欢迎关注路条编程的公众号，通过学习无障碍网页设计这一系列文章，你将会逐步掌握无障碍的代码编写，为图片、音频及视频等非文本内容提供文本替代及创建更好用户体验的 Web 页面相关的基础知识。
今天我们介绍的内容是使用 figure 元素提高图片的可读性。HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。它们一起用于展示可视化信息（如：图片、图表、代码等）及其标题。这样通过语义化对内容进行分组并配以用于解释 figure 文字，可以极大地提升内容的可读性。对于图片之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。figcaption 元素并不是必需的，但如果包含它，它就必须是 figure 元素的第一个子元素或最后一个子元素。并且，一个 figure 元素可以包含多个内容块，但无论 figure 元素里面有多少个内容块，最多只允许有一个 figcaption 元素。
以下代码是一个 figcaption 标签包含在 figure 标签中并且可以与其他标签组合使用的一个示例：
<figure><img src="../images/demo.jpeg" alt="示例"><br><figcaption>演示图片</figcaption></figure>
除图片外，figure 元素中还可以放置代码块、视频、音频片段、引用、表格、代码、广告或任何与这些相关的组合。以下代码使用 figure 元素来标记 css 样式类的定义：
<figure><figcaption>css 卡片音频样式类定义.</figcaption><pre><code>.card audio {width:90%;margin-top:20px;}</code></pre></figure>
在文章 "无障碍网页设计：「06」使用 audio 元素提高音频内容的可访问性" 代码基础上， 继续修改模块 4 部分的代码。在音频标签的下面，增加一个 figure 标签，在 figure 标签中增加一个图片标签 img 和换行标签，最后一个子标签为 figcaption , 内容为 “八月秋分白露交”。为了方便展示 figure 的效果，在页面 style 部分增加样式定义类 .card figure ， 增加一个 1 像素宽的灰色半径 5 像素的圆角虚线。为了使标题描述居中显示，增加了样式类 .card figcaption , 样式类定义如下所示：
<style type="text/css">.card figure {margin-top: 20px;padding: 5px;border: 1px dashed #ccc ;border-radius: 5px;}.card figcaption {text-align: center;}</style>
调整 html 代码如下所示：
<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"><audio id="icode-road-model4-audio" controls autoplay loop ><source src="https://www.icoderoad.com/admin/assets/yqxs.mp3" type="audio/mpeg" autoplay />您的浏览器不支持音频标签，这是一首半阳的歌曲 “一曲相思”</audio><figure><img src="../images/autumn.jpg" alt="秋分时节"/><br><figcaption>八月秋分白露交</figcaption></figure></div></article>
保存页面代码，预览页面，整体效果图如下所示：
重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。
今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。
作者：路条编程（转载请获本公众号授权，并注明作者与出处）
