role="grid"仅适用于div或ul模拟的伪表格，原生已具完整语义；必须使用场景有三：div+css grid实现的交互面板、第三方库未用标签的组件、无法重构为原生表格的遗留模块。

role="grid" 不该加在普通表格上，它只适合你用 div 或 ul 模拟的“伪表格”——比如带拖拽排序、行内编辑、多选高亮的电子表格组件。原生 <table> 已自带完整语义，硬加 <code>role="grid" 反而会覆盖浏览器默认行为，导致屏幕阅读器重复播报或跳过标题。

什么时候必须用 role="grid"？

只有三类情况才需要：
• 用 div + CSS Grid 实现的可交互数据面板（如 BI 看板里的指标卡网格）
• 第三方 UI 库渲染的“表格”组件，底层没用 <table> 标签<br>• 需要键盘方向键导航但又无法重构为原生表格的遗留模块 <h3>role="grid" 的最小必要配置</h3> <p>漏掉任意一项，读屏器就当它是普通容器：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>tabindex="-1"：让容器本身可被 JS 聚焦，否则键盘用户进不去

每个直接子元素设 role="row"，不能是 div 或 section

每行内的单元格统一用 role="gridcell"（不是 td），且不能混用 role="columnheader" 和 role="rowheader"

表头单元格必须显式标注 aria-sort（如 aria-sort="ascending"），否则排序状态对视障用户不可见

和原生

混用的典型错误

常见反模式：

• 给 <table role="grid"> 加 <code>aria-multiselectable="true"：原生 <table> 不支持该属性，读屏器会忽略或报错 <li>在 <code><thead> 里写 <code><th role="columnheader">：多余，<code><th> 本身已隐含该 role，强行覆盖可能破坏 scope 关联 <li>用 <code>grid-template-areas 布局却套 role="grid"：CSS 的 grid-template-areas 无语义，role="grid" 也无法补救，必须配合 HTML 结构层级
真正难的是键盘导航逻辑——role="grid" 不提供方向键移动、Home/End 跳转、Shift+箭头连选这些能力，全得你用 JS 实现并同步更新 aria-selected 和焦点位置。这点容易被当成“加了 role 就完事”，结果视障用户只能 tab 进去，却卡死在第一个单元格。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！