role="presentation" 不能真正消除表格语义，仅替换隐式 role="table"，子元素语义仍保留；失效主因是未移除<th><caption>等语义子元素或嵌套可交互控件；推荐改用div+CSS Grid/Flex布局替代表格结构。
role="presentation" 不能真正“消除”表格语义，只能覆盖 table 的角色
直接给 <table> 加 role="presentation" 并不会让屏幕阅读器彻底忽略它——浏览器仍会解析其 DOM 结构，部分读屏器（如旧版 NVDA + IE）甚至会暴露空表格行/列信息。它只是把 table 的隐式 role="table" 替换为 role="presentation"，而子元素的语义不受影响。
为什么加了 role="presentation" 表格还是被读成“表格”？
常见失效原因包括：
-
<th>、<caption>、<thead>等语义化子元素未移除，辅助技术可能据此恢复表格上下文 -
<button>或<input>嵌套在role="presentation"的<table>内，它们的原生角色（如button）依然生效，且可能与外层“无角色”产生焦点/朗读顺序冲突 - Chrome + NVDA 组合下，某些渲染路径会忽略
role="presentation"对<table>的覆盖，需额外配合aria-hidden="true"（仅当确认整张表纯装饰）
真正有效的做法：不用 table 标签
语义正确的替代方案比强行覆盖更可靠：
- 用
<div>+ CSSdisplay: grid或display: flex实现对齐布局，完全避开表格语义 - 若必须保留 HTML 表格结构（如遗留系统），至少同步清理子元素：
<th>改为<div role="none">，删掉<caption>，避免<tr>内出现<button> - 装饰性图片用
<img src="deco.svg" alt="">，而非<table>包裹——alt=""才是关键，role="presentation"在这里只是冗余补丁
role="presentation" 和 role="none" 怎么选？
两者语义等价，但兼容性不同：
立即学习“前端免费学习笔记（深入）”；
-
role="none"是 ARIA 1.1+ 推荐写法，现代读屏器支持良好 -
role="presentation"在 IE11、旧版 JAWS 中更稳定，如需兼容这些环境，优先用它 - 别给
<div>或<span>加这两个值——它们本就没有可覆盖的隐式角色，属于冗余
最易被忽略的是：ARIA 角色覆盖只作用于“角色”，不影响子元素行为、CSS 渲染或 DOM 可聚焦性。一个加了 role="presentation" 的 <table>，里面放个 <button>，按钮照样可点、可读、可聚焦——你没隐藏它，只是骗过了表格这层语义。
