HTML中不存在合法的role="paragraph"，段落语义应由原生<p>元素承担；错误使用会触发可访问性警告，正确做法是仅用<p>标签并借助CSS解决布局问题。
role="paragraph" 是无效的 ARIA 属性值
HTML 中没有 role="paragraph" 这个合法值，用它不仅没效果，还会被屏幕阅读器忽略，甚至触发可访问性警告。ARIA 规范里根本不存在这个 role —— 段落语义由原生 <p> 元素天然承担，不需要、也不允许手动添加 role="paragraph"。
什么时候该用 role="text"？
极少数情况下，你需要让一组内联元素（比如多个 <span> 套嵌）被当作一个连续文本单元朗读（避免屏幕阅读器逐个读出每个 <span>），可以考虑 role="text"：
-
role="text"是 ARIA 1.2 新增的、仅用于“纯文本容器”的隐式角色，不适用于块级结构 - 它不能替代
<p>，也不能加在<p>上（会覆盖原有语义，反而有害） - 只应在确实无法使用原生语义标签、且必须合并朗读上下文时谨慎使用
示例（不推荐但可说明用途）：
<div role="text"><span>Hello</span><span>, world!</span></div>
正确表达段落语义的唯一方式
用 <p> 标签，就够了。它的默认 role 就是 paragraph（由浏览器自动映射），无需、也不应显式声明：
立即学习“前端免费学习笔记（深入）”；
- 不要写
<p role="paragraph">...—— 多余且错误 - 不要用
<div role="paragraph">—— role 值非法，AT（辅助技术）直接忽略 - 如果样式受限（比如父容器用了
display: flex导致<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> 在复杂布局里依然保持语义完整和视觉表现一致 —— 这得靠 CSS，不是 ARIA。
