html中不存在合法的role="paragraph"，段落语义应由原生元素承担；错误使用会触发可访问性警告，正确做法是仅用标签并借助css解决布局问题。

role="paragraph" 是无效的 ARIA 属性值

HTML 中没有 role="paragraph" 这个合法值，用它不仅没效果，还会被屏幕阅读器忽略，甚至触发可访问性警告。ARIA 规范里根本不存在这个 role —— 段落语义由原生 <p></p> 元素天然承担，不需要、也不允许手动添加 role="paragraph"。

什么时候该用 role="text"？

极少数情况下，你需要让一组内联元素（比如多个 <span></span> 套嵌）被当作一个连续文本单元朗读（避免屏幕阅读器逐个读出每个 <span></span>），可以考虑 role="text"：

• role="text" 是 ARIA 1.2 新增的、仅用于“纯文本容器”的隐式角色，不适用于块级结构
• 它不能替代 <p></p>，也不能加在 <p></p> 上（会覆盖原有语义，反而有害）
• 只应在确实无法使用原生语义标签、且必须合并朗读上下文时谨慎使用

示例（不推荐但可说明用途）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<div role="text">
<span>Hello</span><span>, world!</span>
</div>

正确表达段落语义的唯一方式

用 <p></p> 标签，就够了。它的默认 role 就是 paragraph（由浏览器自动映射），无需、也不应显式声明：

• 不要写 <p role="paragraph">...</p> —— 多余且错误
• 不要用 <div role="paragraph"> —— role 值非法，AT（辅助技术）直接忽略 <li>如果样式受限（比如父容器用了 <code>display: flex 导致 <p></p> 不换行），优先改 CSS，而不是换标签

检查是否误用了 paragraph role 的方法

打开浏览器开发者工具，在 Elements 面板中选中元素，看 Accessibility 标签页：

• 如果看到 “Invalid role” 或 “No corresponding ARIA role” 提示，基本就是写了 role="paragraph"
• 用 axe 或 WAVE 插件扫描，会直接报错 ARIA role must be valid
• 运行 document.querySelector('[role="paragraph"]')，若有返回结果，说明代码里藏了这个错误

真正需要关注的，从来不是怎么“加上”段落 role，而是怎么让 <p></p> 在复杂布局里依然保持语义完整和视觉表现一致 —— 这得靠 CSS，不是 ARIA。