网页中无限滚动哨兵（sentinel）应使用何种HTML Role？

对于你实现的这种作为加载触发哨兵的Web Component，不需要为<infinite-scroll>元素指定额外的ARIA role，重点应放在加载状态的可访问性反馈上，具体原因和处理方式如下：

• 这类哨兵组件的核心作用是触发加载逻辑，本身对用户（尤其是屏幕阅读器用户）没有直接的交互或语义价值，强行添加不合适的role反而会干扰辅助技术的正确解读。
• 关键要做好加载状态的告知：
  • 当触发加载时，给内部的加载指示器（比如你的spinner容器）添加role="status"，这个角色专门用于向用户传递异步更新的状态信息，屏幕阅读器会自动读取这类元素的内容，无需用户主动触发。
  • 配合aria-label或屏幕阅读器可见的文本，明确提示当前状态，比如“正在加载更多内容”；如果没有更多数据可加载，要更新提示为“已加载全部内容”，并确保提示能被识别。
  • 加载过程中可以给容器添加aria-busy="true"，进一步明确页面处于忙碌状态。

修改后的示例代码参考：

<body>
  <main>
    <ul>
      <li></li>
      <li></li>
      .
      .
      .
    </ul>

    <infinite-scroll id="infinite-scroll-sentinel" class="infinite-scroll">
      <div id="infinite-scroll-spinner" role="status" aria-label="正在加载更多内容">
        {% render 'icon-spinner' %}
        <!-- 视觉隐藏的文本，供屏幕阅读器读取 -->
        <span class="sr-only">正在加载更多内容</span>
      </div>
    </infinite-scroll>
  </main>
</body>

（注：.sr-only类需要自定义视觉隐藏样式，确保仅屏幕阅读器可见）

总结来说，无需给哨兵组件本身指定role，把精力放在加载状态的可访问性提示上，就能满足无障碍需求。

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