React项目：无需tabIndex实现屏幕阅读器读取图片alt文本

核心原因 #

原生<img>标签默认不可被键盘聚焦（除非设置tabIndex、使用usemap或被可聚焦元素包裹），所以Tab键无法选中它，屏幕阅读器也就不会读取其alt文本。以下是无需tabIndex的实现方案：

方案1：用语义化按钮包裹图片 #

利用<button>标签的默认可聚焦特性，将图片包裹在按钮内，同时移除按钮的默认样式避免视觉干扰。屏幕阅读器会自动读取按钮内图片的alt文本（或统一设置按钮的aria-label确保一致性）。

使用示例 #

// 调用Image组件时
<button className="image-container-btn" aria-label="Hello world">
  <Image {...image} alt="Hello world" />
</button>

配套样式（消除按钮默认外观） #

.image-container-btn {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: default; /* 若无需点击交互，移除默认指针样式 */
}

方案2：用链接包裹（适用于图片需跳转场景） #

如果图片本身是可跳转的内容，直接用<a>标签包裹，<a>默认支持Tab聚焦，屏幕阅读器会读取图片的alt文本：

<a href="/target-page">
  <Image {...image} alt="Hello world" />
</a>

注意：仅当图片有实际跳转需求时使用此方案，不要设置空href（会导致页面刷新）。

额外注意事项 #

• 确保alt文本准确描述图片内容，避免与周边已有文本重复；
• 若图片与旁边的按钮存在关联，可通过aria-describedby或aria-labelledby属性建立语义关联，提升屏幕阅读器的识别逻辑。

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