滚动场景无障碍问题：jQuery滚动到评论区如何触发屏幕阅读器朗读

1. 给评论区域容器补充无障碍属性 #

你需要给ID为scrollHere的评论区容器添加3个属性，示例代码如下：

<div id="scrollHere" tabindex="-1" role="region" aria-label="用户评论区">
  <!-- 此处为原有的评论内容代码 -->
</div>

各属性作用：

• tabindex="-1"：让非交互的div容器支持通过代码主动触发聚焦，同时不会被键盘Tab键误触发，不影响普通用户的键盘导航逻辑
• role="region"：标记该区域为页面核心功能区，屏幕阅读器会将其识别为独立的可导航区块
• aria-label="用户评论区"：给区域添加语义化说明，区域被聚焦时屏幕阅读器会优先播报该标识

2. 修改滚动事件代码，滚动完成后主动聚焦评论区 #

你现有的代码仅触发了页面滚动，系统焦点还停留在原来的「查看更多」按钮上，屏幕阅读器自然不会识别到页面内容变化。你需要在滚动动画的完成回调里添加聚焦逻辑，修改后代码如下：

$("#onReviewClick").click(function() {
  const reviewArea = $("#scrollHere");
  $('html, body').animate({
    scrollTop: (reviewArea.offset().top) - 100
  }, 1000, function() {
    // 滚动动画结束后将系统焦点移到评论区
    reviewArea.focus();
  }); 
});

可选优化 #

如果你的评论内容是点击「查看更多」后才动态加载的，可以给#scrollHere额外添加aria-live="polite"属性，只要评论内容渲染完成，屏幕阅读器就会自动播报新加载的评论内容，无需用户额外操作。

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