已添加onkeydown事件，Firefox仍提示‘可聚焦元素应有交互语义’

你遇到的问题核心在于：虽然给img元素加了聚焦属性和事件处理，但它本身属于非交互语义元素，辅助技术无法自动识别它的可交互角色，因此Firefox无障碍扫描会抛出该提示。

推荐解决方案：使用<button>标签包裹（语义化最优方案） #

用原生<button>标签包裹图片是最符合无障碍标准的做法，因为button自带内置的交互语义和聚焦行为，无需额外设置tabindex，同时能被辅助技术正确识别：

<button onclick="alert('Google')" onkeydown="alert('Google')" aria-label="Google">
  <img
    src="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.8-ladc.gif"
    alt=""
    title="Google">
</button>

• 这里将img的alt设为空值，因为<button>已经通过aria-label提供了完整的交互语义描述，避免内容重复。
• <button>默认支持Enter和Space键触发点击，符合无障碍交互规范。

备选方案：添加role="button"属性 #

如果无法修改标签结构，可以给img添加role="button"来明确其交互角色，同时确保处理标准的键盘触发事件（Enter和Space键）：

<img
    src="https://www.google.com/logos/doodles/2022/seasonal-holidays-2022-6753651837109831.8-ladc.gif"
    alt="Google"
    title="Google"
    tabindex="0"
    role="button"
    onclick="alert('Google')"
    onkeydown="if(event.key === 'Enter' || event.key === ' ') { alert('Google'); event.preventDefault(); }">

• role="button"会告诉辅助技术该元素是一个可点击的按钮。
• 补充Enter和Space键的处理逻辑，符合按钮的标准交互行为，避免默认的页面滚动等干扰。

为什么原有代码不生效？ #

仅添加onclick和onkeydown事件不足以让辅助技术识别元素的交互属性——这些事件是给浏览器的交互逻辑，而非给辅助技术的语义标识。必须通过语义化标签或role属性明确元素的交互角色，才能通过无障碍扫描。

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