在网页开发中，我们经常会为可交互元素设置:focus样式，用来提示用户当前元素处于聚焦状态，提升页面的可访问性和交互体验。但很多开发者会发现，直接给<img>元素设置:focus样式后，点击或按Tab键选中图片时，样式并不会生效，这是因为图片元素默认不属于可聚焦元素，需要额外处理才能支持:focus状态。
为什么图片默认无法触发:focus样式
浏览器中默认可聚焦的元素包括<a>、<button>、<input>、<select>、<textarea>等本身具备交互能力的元素，这些元素天然支持focus事件，对应的:focus伪类样式也会正常生效。而<img>元素属于静态展示元素，默认没有tabindex属性，也不会被浏览器的Tab键聚焦序列包含，因此无法触发focus状态，设置的:focus样式自然不会生效。
启用图片:focus样式的方法
方法一：添加tabindex属性
给<img>元素添加tabindex属性，可以让图片加入到Tab键的聚焦序列中，从而支持focus事件。如果希望图片可以被Tab键选中，同时不影响原有聚焦顺序，可以设置tabindex="0"；如果希望图片的聚焦顺序优先于其他元素，可以设置正整数值，数值越小聚焦顺序越靠前。
对应的HTML和CSS示例如下：
<!-- HTML代码 -->
<img
src="logo.png"
alt="网站logo"
tabindex="0"
class="focusable-img"
>
<!-- CSS代码 -->
<style>
.focusable-img:focus {
outline: 2px solid #1890ff;
outline-offset: 4px;
border-radius: 2px;
}
</style>
方法二：结合可访问性属性使用
如果图片本身具备交互含义，比如点击图片可以跳转页面、触发弹窗等，建议同时添加role属性和对应的交互事件，让辅助设备能正确识别图片的功能。如果是可点击的图片，还可以添加aria-label属性补充描述，提升可访问性。
示例代码如下：
<!-- 可点击的图片示例 -->
<img
src="banner.jpg"
alt="活动宣传图"
tabindex="0"
role="button"
aria-label="点击查看活动详情"
class="clickable-img"
onclick="openActivityDetail()"
>
<style>
.clickable-img:focus {
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.3);
cursor: pointer;
}
.clickable-img:hover {
opacity: 0.9;
}
</style>
<script>
function openActivityDetail() {
// 打开活动详情的逻辑
console.log("打开活动详情页");
}
</script>
注意事项
- 不要随意给所有图片添加
tabindex属性，只有具备交互意义或者需要用户聚焦的图片才需要设置，否则会干扰用户的Tab键浏览体验。 - 设置
:focus样式时，不要直接移除outline属性而不提供其他替代的聚焦提示，这会导致键盘用户无法感知当前聚焦的元素，违反可访问性规范。 - 如果图片的
alt属性为空（即装饰性图片），不建议为其启用:focus样式，因为这类图片本身不需要用户关注，添加聚焦逻辑没有实际意义。 - 当设置
tabindex="-1"时，图片不会被Tab键选中，但可以通过JavaScript调用focus()方法主动聚焦，适合需要程序控制聚焦的场景。
常见问题解答
设置了tabindex还是无法触发focus？
检查图片是否被设置了display: none或者visibility: hidden，隐藏元素无法被聚焦。另外如果图片被disabled属性或者类似的自定义禁用逻辑限制，也会导致无法触发focus事件。
focus样式和hover样式需要保持一致吗？
没有强制要求，但建议交互状态样式保持统一，比如hover和focus都使用相同的边框或者阴影效果，让用户获得一致的视觉反馈。如果两者逻辑不同，也可以分别设置，只要保证聚焦状态有明显的提示即可。