caption标签是表格标题的唯一标准语义化方式，必须作为table的第一个子元素；role="caption"非法且无效，wai-aria规范中不存在该值。
role="caption" 是无效写法，浏览器和辅助技术都不认
role="caption" 不是合法的 ARIA role，WAI-ARIA 规范中根本不存在这个值。你写上去，浏览器会忽略它，屏幕阅读器也不会将其当作标题处理——它只会被当成一个无语义的 generic 元素，甚至可能 fallback 成 region 或直接不播报。
想给表格加标题，必须用 caption 标签，不是 role
表格标题的唯一标准语义化方式是 <caption></caption> 元素，它必须是 <table> 的第一个子元素：
<pre class="brush:php;toolbar:false;"></pre>
<table>
<caption>2024年用户活跃度统计</caption>
<thead><tr>
<th>日期</th>
<th>DAU</th>
</tr></thead>
<tbody><tr>
<td>7月1日</td>
<td>12480</td>
</tr></tbody>
</table>
<ul>
<li>
<code><caption></caption> 自带语义，无需额外 role；加了 role="caption" 反而覆盖原生语义，得不偿失
<caption></caption> 塞进 <thead> 或 <code><tbody> 里——位置错，语义就废了
<li>别用 <code><div role="caption"> 模拟——DOM 结构错误，无障碍树里根本找不到标题
<h3>想给图片加说明？用 <code>figure + figcaption，不是 role
如果你看到有人写 <img><div role="caption">这是服务器机房照片</div>，那是错的。caption 标签只属于 <table>，<code>role="caption" 也不存在。
正确做法是：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<figure> @@##@@ <figcaption>北京IDC机房A区，2024年Q2部署状态</figcaption></figure>
-
<figcaption></figcaption>是<figure></figure>的语义化标题，支持上下位置、可访问性关联 - 不用
role，也不用aria-label替代——那只是补救，不是结构设计 - 如果硬套
role="figure"或role="img"，反而可能干扰原生语义
真正需要 role 的地方，是语义缺失且无法换标签时
role 不是用来“命名标题”的，它是兜底手段，只在以下情况必要：
- React 渲染出一堆
<div>，但运行时确定它是导航区 → 补 <code>role="navigation" - 要让一个
<span onclick></span>被读作按钮 → 必须加role="button"，并配tabindex="0"和键盘事件 - 自定义 tab 组件 → 用
role="tablist"+role="tab"+role="tabpanel"，且必须配aria-controls等属性
拿 role 去“造” caption、heading、figure 这类已有原生标签的功能，等于绕开标准走弯路——结构松散、维护成本高、无障碍测试必挂。
