role="article" 是 aria 角色，用于标识独立可分发的内容区块，仅影响屏幕阅读器解析；须配合 aria-labelledby 或 aria-label 使用，且不可与原生 元素重复嵌套。
role="article" 的语义作用和适用场景
role="article" 是 ARIA（Accessible Rich Internet Applications）规范中的一个角色，用于标识页面中独立、可被单独分发或重用的内容区块。它不改变视觉表现，只影响屏幕阅读器对内容结构的解读。常见于博客正文、新闻条目、论坛帖子等——但要注意：如果已经用了 <article></article> HTML5 语义元素，就**不需要再加 role="article"**，因为 <article></article> 默认隐含该 role。
什么时候必须手动写 role="article"
只有在无法修改 HTML 结构、或使用了非语义容器（如 <div>）又需要明确传达文章语义时才手动添加。比如旧系统模板只允许嵌套 <code><div>，但内容实际是一篇独立报道：
<pre class="brush:php;toolbar:false;"><div role="article" aria-labelledby="post-title">
<h2 id="post-title">前端性能优化的三个盲点</h2>
<p>很多开发者忽略了...</p>
</div></pre>
<ul>
<li>
<code>aria-labelledby 指向标题 ID，帮助屏幕阅读器建立标题与内容的关联
role="article" 就完事，缺少标题关联会导致语义断裂<article></article> 外层，会造成 role 重复，部分读屏工具会报冗余警告role="article" 和 的兼容性差异
所有现代浏览器都原生支持 <article></article> 元素的语义映射；而 role="article" 依赖 ARIA 支持，在极老版本 IE（如 IE11）中部分辅助技术可能忽略或误读。实际项目中：
- 新项目优先用
<article></article>，简洁且无兼容风险
- 若需支持 IE9–IE11，
role="article" + <div> 是可行退化方案，但必须配 <code>aria-labelledby 或 aria-label
- Vue/React 等框架里动态渲染内容时，若组件封装了
<article></article>，不要在父容器上再加 role="article"，易造成嵌套 role 冲突
容易被忽略的 aria 属性配合点
单独写 role="article" 几乎没用，必须配合至少一项可访问性标识：
- 有可见标题时，用
aria-labelledby="id" 关联对应标题元素
- 无显式标题时，用
aria-label="技术分享：CSS 容器查询实战" 提供简明描述
- 避免用
aria-describedby 替代标题关联，它只作补充说明，不承担主语义
- 不要给
role="article" 加 tabindex="0"，它不是交互控件，强行聚焦反而破坏阅读流
真正起作用的是结构+标签+上下文三者一致。role 只是补丁，不是替代语义 HTML 的捷径。
所有现代浏览器都原生支持 <article></article> 元素的语义映射；而 role="article" 依赖 ARIA 支持，在极老版本 IE（如 IE11）中部分辅助技术可能忽略或误读。实际项目中：
- 新项目优先用
<article></article>，简洁且无兼容风险 - 若需支持 IE9–IE11，
role="article"+<div> 是可行退化方案，但必须配 <code>aria-labelledby或aria-label - Vue/React 等框架里动态渲染内容时，若组件封装了
<article></article>，不要在父容器上再加role="article"，易造成嵌套 role 冲突 - 有可见标题时，用
aria-labelledby="id"关联对应标题元素 - 无显式标题时，用
aria-label="技术分享：CSS 容器查询实战"提供简明描述 - 避免用
aria-describedby替代标题关联，它只作补充说明，不承担主语义 - 不要给
role="article"加tabindex="0"，它不是交互控件，强行聚焦反而破坏阅读流
容易被忽略的 aria 属性配合点
单独写 role="article" 几乎没用，必须配合至少一项可访问性标识：
真正起作用的是结构+标签+上下文三者一致。role 只是补丁，不是替代语义 HTML 的捷径。
