媒体画廊Tab导航无障碍优化问题求助

问题说明 #

当前媒体画廊的Tab导航存在两个异常：

• 焦点处于视频最后一个控件时，按Tab键直接跳至浏览器导航栏，需改为跳转至对应<h3 class="article_media_container_card_likes">点赞元素
• 焦点处于图片上时，按Tab键直接跳至下一个媒体，需改为跳转至对应点赞元素

解决方案 #

1. 图片焦点处理 #

图片默认无法获取焦点，需先通过tabindex="0"赋予其可聚焦属性，再通过键盘事件拦截默认跳转行为，手动将焦点导向点赞元素。

2. 视频焦点处理 #

视频控件由浏览器原生生成，焦点会在控件间自动流转。需监听控件的键盘事件，判断当前是否处于最后一个控件，若则拦截默认跳转，将焦点导向点赞元素。

代码实现 #

修改后的HTML（关键部分） #

<!-- 视频卡片 -->
<article class="article_media" title="photographie de Wild horses in the mountains">
  <div class="article_media_container">
    <div class="article_media_container_card">
      <video class="article_media_container_card_video" controls="" onclick="displayLightBox(243, 5234343, 'Mimi')">
        <source src="./assets/media/Mimi/Animals_Wild_Horses_in_the_mountains.mp4" type="video/mp4">
      </video>
      <div class="article_media_container_card_title_and_price">
        <h2 class="article_media_container_card_title">Wild horses in the mountains</h2>
        <h3 class="article_media_container_card_likes" onclick="incrementLike(this)" aria-label="j'aime" tabindex="0">142 </h3>
      </div>
    </div>
  </div>
</article>

<!-- 图片卡片 -->
<article class="article_media" title="photographie de Rainbow Bird">
  <div class="article_media_container">
    <div class="article_media_container_card">
      <img src="./assets/media/Mimi/Animals_Rainbow.jpg" alt="photo de Rainbow Bird" class="article_media_container_card_img" onclick="displayLightBox(243, 95234343, 'Mimi')" tabindex="0">
      <div class="article_media_container_card_title_and_price">
        <h2 class="article_media_container_card_title">Rainbow Bird</h2>
        <h3 class="article_media_container_card_likes" onclick="incrementLike(this)" aria-label="j'aime" tabindex="0">59 </h3>
      </div>
    </div>
  </div>
</article>

JavaScript代码 #

// 处理图片Tab跳转逻辑
document.querySelectorAll('.article_media_container_card_img').forEach(img => {
  img.addEventListener('keydown', (e) => {
    // 仅处理正向Tab（未按住Shift）
    if (e.key === 'Tab' && !e.shiftKey) {
      e.preventDefault();
      // 定位同卡片下的点赞元素并聚焦
      const likesEl = img.closest('.article_media_container_card').querySelector('.article_media_container_card_likes');
      likesEl.focus();
    }
  });
});

// 处理视频Tab跳转逻辑
document.querySelectorAll('.article_media_container_card_video').forEach(video => {
  video.addEventListener('keydown', (e) => {
    if (e.key === 'Tab' && !e.shiftKey) {
      // 获取视频所有可聚焦控件
      const controls = video.querySelectorAll('button, input, select');
      if (!controls.length) return;
      
      // 判断当前焦点是否为最后一个控件
      const lastControl = controls[controls.length - 1];
      if (document.activeElement === lastControl) {
        e.preventDefault();
        const likesEl = video.closest('.article_media_container_card').querySelector('.article_media_container_card_likes');
        likesEl.focus();
      }
    }
  });
});

补充说明 #

• 给点赞元素添加tabindex="0"，确保其可被焦点定位
• 图片通过tabindex="0"变为可交互元素，再通过事件拦截实现自定义跳转
• 视频通过遍历原生控件，判断焦点位置来控制跳转逻辑，适配不同浏览器的控件结构

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