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