role="presentation"仅覆盖有隐式角色的元素（如table、ul、li），不删除语义，也不影响子元素；div/span等无隐式角色的元素添加无效；真正需消除语义时应优先选用语义化HTML替代方案。
role="presentation" 不能消除语义，只能覆盖当前元素角色
它不是“删除”语义的开关，而是告诉辅助技术：“别按这个标签的默认角色理解我”。table 会变成无角色容器，ul 不再被读作“列表”，但子元素该是什么还是什么——button 还是按钮，th 还是表头，img 有 alt 就仍带图像语义。
常见误操作是给一个包着表单控件的 div 加 role="presentation"，以为能“清空语义”。其实 div 本就没有可覆盖的隐式角色，加了纯属冗余；而里面的 input 和 label 语义完全不受影响。
哪些元素加 role="presentation" 才真正生效
只有原本自带隐式 ARIA 角色、且该角色允许被覆盖的元素才起作用：
-
table→ 默认role="table"，可被覆盖 -
ul/ol→ 默认role="list"，可被覆盖 -
li→ 默认role="listitem"，可被覆盖 -
img→ 无隐式角色，加role="presentation"没用；要让它装饰性，得配alt="" -
div/span→ 默认无角色或role="generic"，加role="presentation"不改变任何行为
表格里加 role="presentation" 却仍被读成表格？检查这三处
即使外层 table 加了 role="presentation"，屏幕阅读器仍可能还原语义，原因通常是内部残留语义化子元素：
立即学习“前端免费学习笔记（深入）”；
-
th没改掉 → 它自带role="columnheader"，必须换成td或div role="none" -
caption还在 → 它强制触发表格上下文，必须删掉 - 嵌套了
button、a等交互元素 → 它们的原生角色不会被外层role="presentation"抑制
更稳妥的做法是：不用 table 做布局，改用 div + display: grid 或 flex。语义和样式彻底解耦，比靠 ARIA “打补丁”可靠得多。
比 role="presentation" 更少出错的替代方案
多数所谓“需要消除语义”的场景，本质是用了错误的 HTML 元素：
- 图标用
<span class="icon"></span>→ 改用<svg aria-hidden="true"><use href="#x"></svg>，或直接<img src="x.svg" alt=""> - 横向导航用
ul→ 保留ul，它本就是语义正确的列表；CSS 控制显示方式，不碰 ARIA - 纯视觉分隔线 → 用
<hr>，它天然是role="separator"；别用div role="separator" - 布局容器用
table→ 换成div，配合grid-template-columns或flex-wrap
真正难处理的，只有那些无法修改 HTML 结构的遗留系统——这时 role="presentation" 是权宜之计，但必须搭配完整可访问性测试，不能只看“加了没”。
