本文介绍如何通过 JavaScript 在页面首次加载时自动聚焦指定的锚点（）元素，并解决可访问性问题，推荐使用语义化 替代非导航型链接，同时提供兼容性良好的聚焦方案。

本文介绍如何通过 JavaScript 在页面首次加载时自动聚焦指定的锚点（`

<a class="insanchor" href="#" tabindex="0" onclick="showInstructors(); return false;">FOR INSTRUCTORS</a>
<a class="stuanchor" href="#" tabindex="0" onclick="showStudents(); return false;">FOR STUDENTS</a>

✅ href="#" 语义更清晰（表示“当前页内动作”），配合 return false 阻止默认跳转；tabindex="0" 确保其始终可被键盘聚焦。

? 推荐升级：用 替代 提升可访问性

根据 WAI-ARIA 最佳实践，触发页面内状态切换（如标签切换）应使用 ，而非 。原因如下：

• 的语义是“导航到新资源”，而您的操作不改变 URL，也不跳转；
• 屏幕阅读器会将 读作“链接”，将 读作“按钮”，语义更准确；
• 天然可聚焦、可激活，无需额外 tabindex。

改造示例（HTML）：

Pic Copilot

Pic Copilot是阿里国际推出的面向电商卖家的 AI 商品图和营销设计工具。

下载

<button type="button" class="insanchor" onclick="showInstructors();">FOR INSTRUCTORS</button>
<span> | </span>
<button type="button" class="stuanchor" onclick="showStudents();">FOR STUDENTS</button>

对应 CSS 中，.insanchor:focus 和 .stuanchor:focus 规则保持不变（ 同样支持 :focus 伪类）。此时 focus() 调用更可靠：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.insanchor')?.focus(); // 安全调用（可选链）
});

? 关键注意事项

• 避免 autofocus 属性： 不被 HTML 规范支持（仅表单控件如 、 支持），强行使用无效。
• 聚焦顺序一致性：确保默认聚焦项与初始显示内容一致（如聚焦 .insanchor 时，#ins-container 必须已显示）。
• 键盘导航体验：添加 :focus-visible 样式可优化仅键盘用户的焦点指示（现代浏览器支持）：

.insanchor:focus-visible,
.stuanchor:focus-visible {
  outline: 2px solid #0dc0dc;
  outline-offset: 2px;
}

• 无障碍增强（进阶）：若按标签模式重构，建议遵循 ARIA Tabs Pattern，添加 role="tablist"、role="tab"、aria-controls 等属性，使屏幕阅读器能正确识别组件结构。

✅ 总结

页面加载时聚焦默认锚点，本质是 DOM 就绪后调用 .focus()。但真正关键的是语义正确性：用 替代功能型 ，不仅解决聚焦问题，更提升可访问性、SEO 友好性和代码可维护性。结合 DOMContentLoaded 事件与 tabindex（或原生按钮），即可实现稳定、合规、用户体验友好的初始焦点控制。