role="none"（或role="presentation"）可覆盖元素隐式角色，但非万能语义清除开关；装饰图须配alt=""才有效，列表仅作布局时需同时为ul和li设role="none"，且不可替代原生语义标签。
使用 role="none"（或等价的 role="presentation"）确实可以移除元素的默认语义，但需谨慎使用——它不是万能的“语义清除开关”，而应服务于明确的无障碍目标。
装饰性图片：用 role="none" 不如直接用空 alt
对纯装饰性图片，最规范、最推荐的做法是设置 alt=""。此时屏幕阅读器会自动忽略该图片，无需额外角色声明。
如果因某些原因必须保留非空 alt（如 CMS 限制），再考虑 role="none" 或 role="presentation"。两者效果相同，但 role="presentation" 语义更清晰，是 WAI-ARIA 推荐写法。
-
<img src="deco-line.png" alt="">✅ 推荐，简洁且符合标准 -
<img src="deco-line.png" alt="divider line" role="none">⚠️ 不必要，且alt内容反而可能干扰用户 -
<img src="deco-line.png" role="presentation">✅ 可接受，但仍不如空alt直接
列表容器（如 <ul></ul>）仅作布局时才考虑移除语义
HTML 列表元素（<ul></ul>、<ol></ol>、<li>）本身具有明确语义：表示一组相关项。若实际用途仅为 CSS 布局（比如横向导航栏），且内容逻辑上并不构成“列表关系”，则可移除其语义。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
此时应同时处理容器和子项：
- 给
<ul></ul>添加role="none"或role="presentation" - 给每个
<li>添加role="none"（因为<li>的语义不会被父级role自动继承） - 确保视觉样式和键盘焦点顺序仍合理，避免仅依赖语义结构实现可访问性
示例：
慎用 role="none" 的常见误区
它不等于“让这个元素消失”或“让它变成 div”。它只是告诉辅助技术：“请忽略这个元素的原生语义”，但元素本身仍存在于 DOM、仍可聚焦、仍响应事件——语义被剥离，行为和结构并未改变。
- 不要用于隐藏重要内容：移除语义 ≠ 移除信息。关键文本、链接、控件绝不能仅靠
role="none"来“降级” - 不要替代语义化 HTML：能用
<nav></nav>就不用<div role="navigation">；能用 <code><button></button>就别用<div role="button"> <li>避免嵌套滥用：对已无语义的元素再加 <code>role="none"没有意义，反而增加冗余 - 能否用语义更准确的元素替代？（例如用
<div> 替代无意义的 <code><ul></ul>） - 能否通过 CSS（如
list-style: none）视觉隐藏，同时保留语义？ - 能否用
aria-hidden="true"隐藏装饰性内容而不影响结构？ - 最后才考虑
role="none"或role="presentation"，并确保有充分理由
替代方案优先级建议
在决定是否用 role="none" 前，按以下顺序评估：
