动态加载内容的键盘焦点Tab导航处理方案问询

我有一个带有「加载更多」按钮的博客文章列表。为满足无障碍访问要求，我希望在新增文章后调整键盘焦点位置，使得按下Tab键时，焦点不会跳转到文章列表下方的元素，而是聚焦到新加载的第一篇文章的链接上。

我的思路是点击「加载更多」按钮时获取列表中最后一个<article>元素，在新增文章加载完成后聚焦其中的链接，这样用户再次按下Tab键就能切换到列表中的下一篇文章（示例中的第四篇）。但该方案无效，我推测原因是文章容器的整个HTML被替换了。请问在每次点击「加载更多」按钮都会动态生成全部HTML的情况下，该如何实现需求？

原实现代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>Post List</h1>
<div class="post-container">
  <article>
    <a href="#">
      <h3>First Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Second Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Third Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
</div>

<button class="load-more" href="#">Load More</button>

<div>
  <h3>Some additional links</h3>
  <a href="#">Another Link</a>
  <a href="#">Another Link</a>
  <a href="#">Another Link</a>
</div>

CSS #

.post-container {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}

article {
  max-width:33%;
}

JavaScript #

let additionalPosts = `
  <article>
    <a href="#">
      <h3>Fourth Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Fifth Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Sixth Post</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
`;


$(function() {
  $('.load-more').click(function() {
    const $lastPost = $('.post-container article').last();
    //console.log($lastPost);
    $('.post-container').html($('.post-container').html() + additionalPosts);
    $('a', $lastPost).focus();
    $(this).hide();
  });
});

解决方案 #

你之前的方案失效是因为调用html()替换容器内容时，原来获取的$lastPost对应的DOM元素已经被销毁，变成了脱离文档的废弃节点，聚焦它自然无效。以下两种方法可以解决问题：

方法一：追加新内容而非全量替换（推荐） #

用append()直接把新文章追加到容器末尾，避免原有DOM节点被销毁，同时直接定位新加载的第一篇文章的链接：

$(function() {
  $('.load-more').click(function() {
    // 将新文章字符串转为jQuery对象
    const $newPosts = $(additionalPosts);
    // 追加到容器末尾
    $('.post-container').append($newPosts);
    // 聚焦新加载的第一篇文章的链接
    $newPosts.first().find('a').focus();
    $(this).hide();
  });
});

方法二：全量替换后定位新元素 #

如果业务上必须用全量替换HTML的方式，可以先记录替换前的文章数量，替换完成后根据数量定位新加载的第一篇文章：

$(function() {
  $('.load-more').click(function() {
    // 记录替换前的文章总数
    const originalPostCount = $('.post-container article').length;
    // 全量替换HTML
    $('.post-container').html($('.post-container').html() + additionalPosts);
    // 定位新加载的第一篇文章的链接并聚焦
    $('.post-container article').eq(originalPostCount).find('a').focus();
    $(this).hide();
  });
});

无障碍优化补充 #

• 可以给文章容器添加aria-live="polite"属性，让屏幕阅读器自动通知用户有新内容加载完成；
• 确保所有可聚焦元素（比如文章链接）的tabindex属性合法（默认<a>带href就满足要求）。

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