本文详细讲解如何通过监听键盘事件（arrowleft/arrowright）实现图片画廊的无障碍导航，包括事件绑定时机、当前索引管理、边界处理及可访问性优化。
本文详细讲解如何通过监听键盘事件（arrowleft/arrowright）实现图片画廊的无障碍导航，包括事件绑定时机、当前索引管理、边界处理及可访问性优化。
要让图片画廊支持方向键切换，关键在于正确监听全局键盘事件、维护当前显示图片的索引状态，并安全地更新 DOM。原代码存在多个核心问题：event.arrowRight 属性不存在（应使用 event.key）；handleArrowKeyPress 函数被错误地定义在 forEach 循环内，导致重复绑定且作用域混乱；缺少对当前图片位置的跟踪，无法实现“上一张/下一张”逻辑。
✅ 正确实现步骤
1. 统一监听 keydown 事件（仅一次）
将事件监听器绑定到 window 或具有焦点的容器（如 <section>），避免在循环中重复注册：
// 在全局作用域或初始化后执行一次
window.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
selectNextImage(1);
} else if (event.key === 'ArrowLeft') {
selectNextImage(-1);
}
});⚠️ 注意：确保目标元素（如 <section> 或 <img id="display">）具有 tabindex="0"，以便接收键盘焦点。你已在 HTML 中正确设置了 tabindex，这是良好实践。
2. 实现 selectNextImage(direction) —— 核心逻辑
该函数需知道当前显示的是哪张图，因此必须维护一个 currentIndex 变量（初始值为 0），并在点击缩略图和按键操作时同步更新：
let currentIndex = 0; // 全局状态：记录当前显示图片在 images 数组中的索引
function selectNextImage(direction) {
// 计算新索引（循环切换：到末尾后回到开头，到开头前跳至末尾）
currentIndex = (currentIndex + direction + images.length) % images.length;
// 更新显示区域
createDisplayImage(images[currentIndex]);
}✅ + images.length 是为防止负数取模结果异常（如 -1 % 4 === -1），加长度再取模可确保结果始终为 0~3。
3. 同步点击缩略图时的 currentIndex
原 makeThumbNails 中每个缩略图的 click 事件未更新 currentIndex，会导致按键与点击不同步。修正如下：
const makeThumbNails = (images) => {
images.forEach((image, index) => { // 注意：获取当前 index
const img = document.createElement('img');
img.src = image.url;
img.alt = image.alt;
img.className = 'img';
img.addEventListener('click', () => {
currentIndex = index; // 点击即更新当前索引
createDisplayImage(image);
});
thumbNailBox.appendChild(img);
});
};4. 补充可访问性增强（推荐）
- 为 <section> 添加 role="region" 和 aria-label，明确其为图像展示区；
- 使用 aria-current="true" 动态标记当前选中的缩略图（提升屏幕阅读器体验）；
- 首次加载时调用 createDisplayImage(images[0]) 后，同步设置 currentIndex = 0。
? 完整整合示例（关键片段）
let currentIndex = 0;
// 初始化：设置首张图并聚焦展示区
createDisplayImage(images[0]);
document.querySelector('section').focus(); // 确保键盘事件可触发
// 键盘导航
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') selectNextImage(1);
if (e.key === 'ArrowLeft') selectNextImage(-1);
});
function selectNextImage(direction) {
currentIndex = (currentIndex + direction + images.length) % images.length;
createDisplayImage(images[currentIndex]);
}
// 缩略图生成（含索引同步）
const makeThumbNails = (images) => {
images.forEach((image, idx) => {
const thumb = document.createElement('img');
thumb.src = image.url;
thumb.alt = `Thumbnail ${idx + 1}: ${image.alt}`;
thumb.className = 'img';
thumb.tabIndex = 0;
thumb.addEventListener('click', () => {
currentIndex = idx;
createDisplayImage(image);
thumb.focus();
});
thumbNailBox.appendChild(thumb);
});
};✅ 总结与最佳实践
- 事件绑定只需一次：切勿在循环内重复 addEventListener；
- 状态必须集中管理：currentIndex 是驱动切换的核心，所有交互（点击/按键）都要更新它；
- 边界处理要健壮：使用 (i + d + len) % len 实现无缝循环；
- 可访问性是基础：tabindex、aria-live、语义化标签缺一不可；
- 测试焦点流：按 Tab 键确认焦点能进入缩略图和主图区域，再用方向键验证切换。
现在，你的画廊不仅支持鼠标点击，更具备符合 WCAG 标准的键盘导航能力——真正面向所有用户的现代 Web 体验。
