tabindex="0"无法键盘聚焦的根本原因是元素无语义（如缺少role）且无交互行为（未监听Enter/Space），浏览器虽允许聚焦但辅助技术会跳过；应添加role并绑定键盘事件。
为什么 tabindex 设为 0 却无法用键盘聚焦？
常见现象是：元素写了 tabindex="0"，但按 Tab 键跳过它，或焦点停在按钮/链接上就不再往下走。根本原因通常是该元素本身不可交互（比如 div 没有 role 或事件监听），浏览器虽允许聚焦，但辅助技术或键盘导航逻辑会跳过“无语义+无行为”的元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给非表单/非锚点元素添加明确的语义角色，例如：
<div tabindex="0" role="button">点击我</div> - 必须绑定键盘响应事件，至少处理
Enter和Space：否则即使能聚焦，用户也无法触发操作 - 避免对
span、p等纯展示标签滥用tabindex="0"——它们缺乏默认交互反馈，容易导致焦点“卡住”或被屏幕阅读器忽略
Tab 键顺序错乱，怎么控制？
浏览器默认按 HTML 文档流顺序聚焦，但 CSS position: absolute、flex 排序或 JS 动态插入常打乱这个顺序，导致键盘用户从左上角跳到右下角再回到中间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先靠 HTML 结构保证逻辑顺序，而非依赖视觉布局；用
order调整 flex 项目时，注意它不影响 tab 顺序 - 仅在必要时用
tabindex正整数（如tabindex="1"），但要极度谨慎：正整数会强制重排焦点流，且所有正整数元素会**先于**tabindex="0"和天然可聚焦元素获得焦点，极易引发混乱 - 测试时关闭鼠标，纯用
Tab/Shift+Tab走一遍，看焦点是否按用户任务流自然推进（比如表单先填姓名→邮箱→提交，而不是先跳到页脚）
按钮和链接都支持键盘，但行为不一致？
典型问题：用 div + click 事件模拟按钮，结果 Space 键不触发；或用 a 标签做操作按钮，按 Enter 跳转却没阻止默认行为。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮行为一律用
<button>，它原生支持Enter和Space触发click事件，无需额外监听 - 链接用于导航，若必须用
a做操作（如“删除”），需同时处理两个键：element.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); doAction(); } }); - 禁用状态要用
disabled属性（对button）或aria-disabled="true"（对自定义组件），否则键盘仍能聚焦但无法触发——这是最常被忽略的无障碍断裂点
移动端软键盘弹出后焦点丢失或滚动异常
iOS Safari 和部分安卓浏览器在软键盘展开时，会重置视口、隐藏焦点元素，甚至把焦点“吞掉”，导致用户看不到当前操作位置。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在输入框获得焦点时立即执行耗时 JS（如请求数据、动画），这会加剧渲染延迟，让焦点滚动失效
- 对关键输入框，用
scrollIntoView({ block: 'nearest', inline: 'nearest' })主动调整滚动位置，但需包裹在setTimeout中（iOS 需等软键盘布局完成） - 不要依赖
autofocus——移动端多数浏览器会忽略它，或触发后立即失去焦点；改用 JS 在DOMContentLoaded后延时聚焦
焦点导航不是加个 tabindex 就完事的事，核心在于：元素是否有对应语义、是否响应键盘输入、是否在视觉与逻辑顺序上保持一致。最容易被绕过的，是那些“看起来能点，但键盘按了没反应”的自定义组件——它们往往缺了 role、缺了 keydown 监听、也缺了禁用状态的正确表达。
