页面加载时如何为图片元素设置焦点？

你查到的文档描述是准确的：原生autofocus属性的适用范围严格限定在input、button、textarea、select几类交互元素，直接加在<img>标签上不会生效，可通过以下两步实现需求：

• 为图片添加可聚焦能力
  图片默认属于非交互元素，本身不在焦点流中，无法被聚焦。需要给图片添加tabindex属性修改其聚焦特性：
  • 设置tabindex="0"：图片会被加入默认Tab导航序列，既支持脚本主动聚焦，也支持用户按Tab键切换聚焦到该元素
  • 设置tabindex="-1"：图片仅支持通过脚本调用focus()方法聚焦，不会出现在Tab导航序列中，不会干扰正常的键盘操作路径，是多数场景下的推荐配置
    标签示例：

  <img src="/path/to/your/image.jpg" alt="对应图片的文字描述" tabindex="-1">
  

• 在合适的加载时机触发聚焦
  根据业务需要选择触发时机，调用图片元素的focus()方法即可完成聚焦：
  1. DOM解析完成后立即聚焦（无需等待图片、样式表等资源加载，响应速度最快）

  document.addEventListener('DOMContentLoaded', () => {
    const img = document.querySelector('img.target-image'); // 替换为目标图片对应的选择器
    img?.focus();
  });
  

  2. 等页面所有资源（包括目标图片本身）加载完成后再聚焦

  window.addEventListener('load', () => {
    const img = document.querySelector('img.target-image');
    img?.focus();
  });
  

实践注意事项 #

• 做无障碍适配时，一定要给聚焦的图片补充准确清晰的alt文本，如果图片承担交互功能，还要补充对应的role属性说明元素作用，避免屏幕阅读器用户无法理解焦点落在图片上的意义
• 普通展示类图片不建议设置加载默认焦点，默认焦点应当优先放在页面核心交互控件上，只有图片预览、看图模式这类需要首帧聚焦图片、支持键盘操作（缩放、切图等）的场景才适合用该方案，否则会破坏正常的键盘导航逻辑
• 所有试图直接给<img>加autofocus属性的写法都不符合HTML规范，没有任何浏览器会支持该行为，无需尝试

内容的提问来源于stack exchange，提问作者Jonathan Small