role="grid"必须配合role="row"和role="gridcell"三层嵌套结构使用，单独声明role="grid"仅被识别为空容器；每层角色缺一不可，且需配套aria-labelledby、tabindex="-1"及键盘导航逻辑，否则屏幕阅读器无法正确解析行列关系与交互行为。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
role="grid" 必须配合 role="row" 和 role="gridcell" 一起用
单独给一个 <div role="grid"> 加上 <code>role 属性，屏幕阅读器不会识别为表格式网格——它只会当成一个空容器。真正的网格语义需要三层嵌套结构：外层 role="grid" 定义容器，中间层 role="row" 表示行，最内层 role="gridcell"（或 role="columnheader"/role="rowheader"）表示单元格。
常见错误是把 role="row" 直接加在 <tr> 上却忘了父容器有 <code>role="grid"；或者用 <div> 模拟表格但漏掉某一层 <code>role，导致 NVDA 或 VoiceOver 读不出行列关系。
-
role="grid"元素应包含 aria-label 或 aria-labelledby，否则屏幕阅读器可能只报“grid”，不说明用途 - 每行必须是直接子元素，不能嵌套在其他非
role="row"的容器里（比如中间插个<div class="row-wrapper"> 就会断开语义链） <li> <code>role="gridcell"不自动继承表头关联，跨行/跨列的表头需手动用aria-labelledby指向对应id - 每个
role="gridcell"必须有tabindex="-1"，否则无法通过键盘聚焦（tabindex="0"会导致 Tab 键顺序混乱） - 首次渲染后，需用
.focus()主动设置初始焦点到第一个gridcell，否则屏幕阅读器可能停在grid容器上不动 - 若单元格含可聚焦子元素（如
<button></button>），要阻止其默认 Tab 键行为，改用方向键控制，否则焦点会“逃出”网格 - 原生
<table> 仍优于 ARIA grid：语义完整、无需手写键盘逻辑、兼容性更好 <li>React/Vue 等框架里动态渲染 grid 时，务必确保 <code>role="row"和role="gridcell"在 DOM 中真实存在，不要靠条件渲染把某行整个删掉（会导致行号错乱） - ChromeVox 对
grid的支持比 NVDA 更严格，测试时务必换至少两种读屏软件验证 - 这两个属性值必须是正整数，从 1 开始，不能为 0 或负数
- 合并单元格（
aria-rowspan/aria-colspan）必须同时设置aria-rowindex和aria-colindex，否则读屏软件无法定位起始位置 - 它们只影响读屏体验，不影响 CSS 布局或 JS 行为，但漏写会导致盲人用户完全迷失在网格里
gridcell 与 table cell 的行为差异很关键
role="gridcell" 不像原生 <td> 那样自动参与表格导航（如 Excel 式方向键移动），它依赖 ARIA 的键盘交互规范：用户需按 <code>Arrow 键在网格内移动，按 Enter 进入编辑（如果可编辑），按 Space 切换选中状态（如果支持）。原生 <table> 的 <code><td> 默认没有这些行为。
<p>这意味着你得自己实现键盘焦点管理：监听 <code>keydown、维护当前焦点位置、响应方向键跳转到相邻 role="gridcell"。不写这部分逻辑，光加 role，键盘用户根本无法操作网格。
立即学习“前端免费学习笔记（深入）”；
grid 不等于 table，别滥用
当数据天然具有行列结构且需要排序、筛选、固定表头等交互时，role="grid" 是合理选择；但如果你只是排版几块卡片、或展示静态列表，强行套 grid 反而增加屏幕阅读器负担——它会把每个 gridcell 当成独立可导航项，读出冗余的“cell in row X column Y”。
更轻量的替代方案：用 role="list" + role="listitem" 表达线性结构，或用 role="region" + aria-label 描述布局区块。只有真正需要二维导航语义时才上 grid。
aria-rowindex / aria-colindex 不是必需，但复杂网格需要它
简单网格（比如 5×5 的固定尺寸）可以靠 DOM 顺序让读屏软件推断行列位置；但遇到虚拟滚动、懒加载、合并单元格或动态插入行时，DOM 顺序和逻辑位置脱节，就必须显式标注 aria-rowindex 和 aria-colindex。
例如，滚动到底部只渲染最后 20 行，但逻辑上这是第 981–1000 行，此时 aria-rowindex="981" 告诉读屏软件：“这个 role="row" 实际代表第 981 行”，否则它会误报“第 1 行”。aria-colindex 同理。
role 就以为完事，结果键盘用户卡在第一个单元格动不了。网格的无障碍不是贴标签，是重建一套二维焦点系统。
