role="grid"仅适用于div或ul模拟的伪表格，原生<table>已具完整语义；必须使用场景有三：div+CSS Grid实现的交互面板、第三方库未用<table>标签的组件、无法重构为原生表格的遗留模块。
role="grid" 不该加在普通表格上，它只适合你用 div 或 ul 模拟的“伪表格”——比如带拖拽排序、行内编辑、多选高亮的电子表格组件。原生 <table> 已自带完整语义，硬加 role="grid" 反而会覆盖浏览器默认行为，导致屏幕阅读器重复播报或跳过标题。
什么时候必须用 role="grid"？
只有三类情况才需要：
• 用 div + CSS Grid 实现的可交互数据面板（如 BI 看板里的指标卡网格）
• 第三方 UI 库渲染的“表格”组件，底层没用 <table> 标签
• 需要键盘方向键导航但又无法重构为原生表格的遗留模块
role="grid" 的最小必要配置
漏掉任意一项，读屏器就当它是普通容器：
-
tabindex="-1"：让容器本身可被 JS 聚焦，否则键盘用户进不去 - 每个直接子元素设
role="row"，不能是div或section - 每行内的单元格统一用
role="gridcell"（不是td），且不能混用role="columnheader"和role="rowheader" - 表头单元格必须显式标注
aria-sort（如aria-sort="ascending"），否则排序状态对视障用户不可见
和原生 <table> 混用的典型错误
常见反模式：
- 给
<table role="grid">加aria-multiselectable="true"：原生<table>不支持该属性，读屏器会忽略或报错 - 在
<thead>里写<th role="columnheader">：多余，<th>本身已隐含该 role，强行覆盖可能破坏 scope 关联 - 用
grid-template-areas布局却套role="grid"：CSS 的grid-template-areas无语义，role="grid"也无法补救，必须配合 HTML 结构层级
role="grid" 不提供方向键移动、Home/End 跳转、Shift+箭头连选这些能力，全得你用 JS 实现并同步更新 aria-selected 和焦点位置。这点容易被当成“加了 role 就完事”，结果视障用户只能 tab 进去，却卡死在第一个单元格。 
