role="presentation"和role="none"效果相同但兼容性不同：前者兼容旧环境如ie11和旧版jaws，后者是aria 1.1+标准、语义更清晰；二者不可混用，仅对本身有隐式角色且允许覆盖的元素生效，如table、ul有效，img需配alt=""才有效，div/span加则冗余；表格中需同步处理th、caption等子元素语义，否则外层role无效；优先避免语义介入，装饰性内容宜用css实现，必须用img时须alt=""且role="presentation"仅为补丁。
role="presentation" 和 role="none" 本质相同，但兼容性不同
两者都告诉辅助技术“别暴露这个元素的角色”，效果一致：元素在无障碍树中变成 generic 或被跳过。区别只在于浏览器和读屏软件的支持范围。
关键不是“哪个更高级”，而是“你当前要支持谁”：
-
role="none"是 ARIA 1.1+ 的标准写法，语义更清晰，现代环境（Chrome + NVDA、Safari + VoiceOver、Edge）都认 -
role="presentation"在 IE11、旧版 JAWS（≤2018）、部分国产读屏中支持更稳，属于“向下兼容补丁” - 别混用——
role="presentation"和role="none"同时写没意义，AT 只取第一个生效的
哪些元素加了才真有效？
不是所有标签加了就起作用。ARIA 角色覆盖只对**本身有隐式角色且允许被覆盖**的元素生效：
<table> 默认是 <code>role="table"→role="presentation"或role="none"可覆盖-
<ul></ul>默认是role="list"→ 同样可覆盖 -
<img>没有隐式角色，除非带alt；单独加role="presentation"无效，必须配alt="" <div> 和 <code><span></span>默认无角色或为generic→ 加这两个 role 属于冗余，纯属多打字表格里加了却还是被读出表头？
常见翻车现场：给
<table> 加了 <code>role="presentation"，但内部还留着<th> 或 <code><caption></caption>。辅助技术会无视外层 role，直接按子元素的原生语义重建结构。必须同步清理：
- 把
<th> 改成 <code><td> 或 <code><div role="none"> <li>删掉 <code><caption></caption>，或用aria-hidden="true"包裹 - 避免在
role="presentation"的表格里嵌套<button></button>、<a></a>等原生控件——它们的 role 不会被外层抑制 - Chrome + NVDA 下仍有残留结构？补上
aria-hidden="true"双保险（仅限确认纯装饰） - 装饰性图标优先用 CSS
::before/::after实现，不进 DOM 树 - 视觉分隔线不用
<hr>，改用border-bottom或伪元素 - 必须用
<img>做装饰？唯一合规写法是：<img src="deco.svg" alt="" role="presentation">——alt=""是前提，role只是补丁 - 对图标字体（如 Font Awesome），应包在
<span></span>里，并由相邻文本或aria-label提供旁白
比 role 覆盖更靠谱的做法
真正容易被忽略的是：用 ARIA 去“擦除语义”，不如一开始就避开语义介入。
ARIA 角色覆盖只动“角色”字段，不影响
aria-label、aria-expanded或名称计算逻辑。想彻底隐藏，得看清楚你要屏蔽的是“结构”还是“内容”。- 把
