键盘可操作性
相当一部分用户完全依赖键盘操作（运动障碍、读屏器、高级用户），页面必须保证：所有可交互元素能用 Tab 到达、能用 Enter/空格 激活、当前位置有清晰的焦点指示。
tabindex 控制参与 Tab 顺序的方式：默认可聚焦元素（链接、按钮、输入框）不需要写；tabindex="0" 让 div 等元素加入 Tab 序列；tabindex="-1" 允许 JS 调用 focus() 但不进 Tab 序列；正数值会打乱自然顺序，几乎总是坏主意，不要用。
三个实用做法：给 :focus-visible 写醒目的焦点样式（别用 outline: none 干掉焦点）；页面顶部加"跳到主内容"的跳转链接；用原生 button/a/input 而不是 div 加 onclick——原生元素免费获得全部键盘行为。
本节要点交互元素必须可 Tab、可 Enter 激活、焦点可见；tabindex 只用 0 和 -1，禁用正数；别移除焦点轮廓；优先原生控件，交互用 button 不用 div。
HTML
<!-- 跳转链接：键盘用户可跳过导航直达内容 --> <a href="#main" class="skip-link">跳到主内容</a> <nav>……</nav> <main id="main"> <!-- 用原生 button：自带 Tab、Enter、空格支持 --> <button onclick="save()">保存</button> </main> <style> /* 焦点必须可见：绝不要写 outline: none 而不给替代 */ a:focus-visible, button:focus-visible { outline: 3px solid #4a9eff; outline-offset: 2px; } /* tabindex 只用这两个值： 0 → 加入 Tab 序列；-1 → 仅允许 JS 聚焦 */ </style>
