加tabindex="0"仅让<p>进入Tab流，但必须同步添加role属性、监听keydown事件并提供:focus-visible样式，否则会成为不可操作的“死焦点”。
加 tabindex="0" 能让 <p> 进入 Tab 流，但仅此一步完全不够——它只会变成一个“能停、不能用”的死焦点。
为什么 <p tabindex="0"> 加了还是没反应？
浏览器只认这个属性为“允许聚焦”，不负责解释“聚焦后干啥”。常见现象包括：
- Tab 键停在
<p>上，但按 Enter 或 Space 没任何响应 - 屏幕阅读器读作“段落”，而不是“可操作项”
- CSS 清除了
outline，又没补:focus-visible，用户根本看不见焦点在哪 - 该
<p>本意是模拟按钮或开关，但语义和行为全缺失
必须同步做的三件事
否则等于给门装了锁芯却不配钥匙：
-
补
role属性：明确告诉辅助技术这是什么。比如<p role="button" tabindex="0">删除</p>，不能只写tabindex="0" -
监听
keydown：手动捕获'Enter'和' '（空格字符），并调用e.preventDefault()防止页面滚动或默认行为 -
提供可见焦点样式：用
:focus-visible替代粗暴的*:focus，避免鼠标用户看到突兀轮廓；若需兼容旧浏览器，至少加<p>:focus { outline: 2px solid #007bff; }
什么时候真该给 <p> 加 tabindex="0"？
绝大多数情况都不该。只有满足全部以下条件时才考虑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 业务逻辑强制要求该段落必须作为整体被键盘用户“跳到”（比如折叠面板标题、自定义 tab 标签）
- 无法改用原生语义标签（如
<button>、<h3 role="tab">） - 已配套实现
role、keydown、:focus-visible三件套
如果只是想让用户点一下就触发动作，直接用 <button type="button"> 更安全、更轻量、无需额外配置。
移动端 Safari 的隐藏坑
在 iOS / iPadOS Safari 中，<p tabindex="0"> 可能首次加载后完全无法被 Tab 键聚焦，即使 DOM 正确、JS 绑定完整。这不是 bug，是 Safari 对非交互元素的主动限制：
- 解决办法：页面初始化后，对第一个目标
<p>主动调用.focus({ preventScroll: false }) - 别传
preventScroll: true—— Safari 不支持该选项，会静默失败 - 若该
<p>在折叠区域或懒加载内容里，确保它已渲染完成再调用.focus()
真正容易被忽略的点在于：焦点是否可见、是否可操作、是否能在所有主流浏览器（尤其是 Safari）中首次加载即生效——这三者缺一不可，而 tabindex="0" 只管第一件事。
