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