从无障碍视角探讨：blockquote内footer与figcaption包裹cite的适配性

从无障碍和屏幕阅读器适配的角度，两种写法都符合HTML规范，但各有适用场景，具体分析如下：

1. Blockquote 内嵌套 Footer + Cite #

这种写法是HTML规范明确支持的，语义上直接将来源信息绑定到引用内容，屏幕阅读器能清晰识别footer作为blockquote的附属说明，不会与核心引用文本混淆。

示例代码：

<blockquote>
  <p>这里是引用的核心内容文本...</p>
  <footer>
    — <cite>引用来源的作品标题</cite>
  </footer>
</blockquote>

注意：cite标签仅用于标注作品标题（如书籍、文章、网站名），作者名称直接放在footer里即可，无需用cite包裹。

2. Figure + Blockquote + Figcaption #

这种写法是将blockquote放在figure容器内，用figcaption作为整个引用单元的说明，适合引用内容包含图片、图表等多媒体元素的场景，语义上把整个引用视为一个独立的“内容块”。

示例代码：

<figure>
  <blockquote>
    <p>这里是引用的核心内容文本...</p>
  </blockquote>
  <figcaption>— <cite>引用来源的作品标题</cite></figcaption>
</figure>

屏幕阅读器会先播报“figure区域”，再读取blockquote内容，最后播报figcaption，逻辑清晰但多了一层嵌套的语义提示。

推荐方案 #

• 如果只是纯文本引用，优先选blockquote内部嵌套footer+cite的结构：语义直接、代码简洁，无障碍支持成熟，屏幕阅读器适配更直观。
• 如果引用内容包含多媒体元素，需要将整个引用作为独立单元展示，再用figure+figcaption的组合更合适。

内容的提问来源于stack exchange，提问作者user2496394