JAWS向上导航时滚动区聚焦元素被静态图片遮挡问题

问题现象 #

页面上半区域为固定静态图片，下半区域为可滚动内容区供用户导航浏览。使用JAWS屏幕阅读器通过方向键向下导航时，内容滚动表现正常；向上导航返回页面顶部时滚动异常，JAWS聚焦的元素会位于顶部静态图片后方被遮挡，无法显示在可视区域内。

已尝试但未生效的方案：

• 为可滚动内容添加tabindex='0'属性
• 在滚动内容内部添加锚点标签

JAWS聚焦元素被顶部图片遮挡示例

问题复现 #

可通过固定高度带滚动属性的内容容器复现该问题，基础代码如下：

<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
    <h1>WCAG 2.1 Abstract</h1>
    <p>
        Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
        accessible. Following these guidelines will make content more accessible to a wider range of people with
        disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
        speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
        and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
        address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
        will also often make Web content more usable to users in general.
    </p>
</section>

根因分析 #

JAWS虚拟光标向上导航时，触发的浏览器原生scrollIntoView逻辑默认会将聚焦元素对齐到滚动容器的最顶部，不会计算顶部固定静态图片的遮挡高度，导致元素滚到图片下方被遮挡。

修复方案 #

• CSS原生偏移适配（优先使用）：给可滚动容器设置scroll-padding-top属性，值等于顶部固定静态图片的实际高度，让浏览器原生滚动逻辑自动预留遮挡区域的偏移。

  .scroll-content-container {
    /* 替换为站点顶部静态图片的实际高度 */
    scroll-padding-top: 120px;
  }
  

  该属性对部分旧版本JAWS兼容性不足，需搭配JS方案做全量覆盖。

• JS主动纠偏滚动位置（兼容全版本JAWS）：监听滚动容器内的焦点事件，当JAWS聚焦到内容元素时，主动计算元素位置，若元素会被顶部图片遮挡则调整滚动位置，保证元素完全露出在可视区域。

  // 替换为站点顶部静态图片的实际高度
  const FIXED_HEADER_HEIGHT = 120;
  const scrollContainer = document.querySelector('.scroll-content-container');
  
  scrollContainer.addEventListener('focusin', (e) => {
    const focusTarget = e.target;
    // 计算聚焦元素相对于滚动容器的顶部距离
    const targetOffset = focusTarget.offsetTop;
    // 计算元素不被遮挡需要的滚动位置
    const expectScrollTop = targetOffset - FIXED_HEADER_HEIGHT;
    // 仅在向上滚动、元素会被遮挡时触发调整，不干扰向下导航的正常滚动逻辑
    if (scrollContainer.scrollTop > expectScrollTop) {
      scrollContainer.scrollTop = expectScrollTop;
    }
  })
  

• 移除冗余属性：删除滚动容器本身添加的tabindex="0"属性，该属性会让容器本身成为焦点目标，干扰JAWS虚拟光标的导航判断，容器内的语义化内容标签（标题、段落、列表项等）无需额外添加tabindex即可被JAWS正常识别。

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