blockquote必须配footer才算完成可访问引用，cite属性仅存机器可读url且多数屏幕阅读器忽略，真正稳定被识别的是blockquote元素本身及内部footer的可见文本。
blockquote 本身自带 role="blockquote"，屏幕阅读器能识别这是引用段落——但仅当它真的在引用外部可验证内容时才有效；滥用或结构错误会让语义失效，甚至干扰辅助技术。
为什么 screen reader 有时会跳过或误读 blockquote
不是所有读屏器都一致处理 blockquote 的 cite 属性，多数（如 NVDA、ChromeVox）完全忽略它；只有少数组合（VoiceOver + Safari）可能朗读 URL，但内容不可控、无上下文。真正稳定被识别的，是 blockquote 元素本身 + 内部 footer 的文本内容。
- 如果
blockquote里没footer，用户听不到“出自哪里”，只能听到“引用开始……引用结束”这种空洞提示 - 如果直接裸放文本（没用
p包裹），部分读屏器会把多段连成一句，丢失段落逻辑 - 如果
cite属性填了非 URL（比如cite="《HTML 标准》"），校验器报错，且辅助技术可能直接丢弃整个引用语义
blockquote 必须配 footer 才算完成可访问引用
footer 是唯一被所有主流辅助技术稳定识别的、用于标注人类可读出处的合法子元素。它必须是 blockquote 的**直接子元素**，且只能有一个。
- 正确写法：
<blockquote cite="https://example.com"> <p>引文内容</p> <footer>— 李四，《前端语义手册》，2025</footer> </blockquote> -
cite元素只该出现在footer内，且仅包裹作品名（如书名、文档标题），不能塞作者名或 URL - 避免用
small、em或纯 CSS 类模拟出处——它们没有语义，读屏器不播报
移动端和窄屏下的可访问性陷阱
浏览器默认给 blockquote 加大左右 margin，在小屏上极易挤占内容宽度，导致文字缩排后难以阅读；更隐蔽的问题是，部分读屏器在窄屏下会因缩进过大而误判为“嵌套层级”，重复播报“引用中的引用”。
- 建议重置样式：
blockquote { margin: 1em 0; padding-left: 1.2em; }，避免依赖原生缩进 - 响应式中慎用
border-left：某些读屏器会将左侧边框误读为“分隔线”而非视觉装饰 - 长英文单词或未断行中文可能撑破容器，加
overflow-wrap: break-word防溢出，否则视障用户滑动时会卡在不可见区域
最难的从来不是怎么写对标签，而是每次敲下 <blockquote></blockquote> 前，得先问一句：这段话真有外部可验证的出处吗？URL 能打开吗？footer 里写的，是不是用户真想看到的来源信息？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
