View Page: Table of Contents links inaccessible to screen reader users after activation

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The table of contents links do not navigate to their target sections.

      Steps to Reproduce

      1. Open the Confluence Cloud Homepage.
      2. From the Sidebar navigation, expand Spaces and open any space.
      3. Open a page that contains Table of Contents (TOC) links.
      4. Turn on a screen reader, such as NVDA or JAWS on Windows, or VoiceOver on Mac.
      5. Use the Tab key to navigate through the Table of Contents links and press Enter to activate a link.
      6. Observe that the page scrolls visually, but the screen reader focus remains on the link.

      Screen Recording

      TOC Links Issue

      Actual Results

      When a screen reader user navigates through table of contents links such as "Project Overview", "Key Features", "Installation Guide", and activates a link by pressing the Enter key, the page visually scrolls to the corresponding section. However, the screen reader focus remains on the activated link instead of moving to the target section. As a result, screen reader users cannot properly access the content through the table of contents.

      Expected Results

      When a Table of Contents link is activated, both the visual focus and the screen reader focus should move to the corresponding target section.

      Apply the following changes:

      • Provide a unique id attribute to the target container.
      • Ensure the <a> tag’s href correctly references the target container.
      • Set focus on the target element using JavaScript’s element.focus() method and make it focusable by adding tabindex="-1".

      Code Snippet:

      This code example is intended only as a general illustration of how to address the violation and should not be considered a complete or production-ready solution. If you have any questions, please attach this ticket to a #help-accessibility request.

      <a href="#Project-Overview">Project Overview</a>
      <h2 id="Project-Overview" tabindex="-1">Project Overview</h2>

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

      Environment

      MacBook Pro (16-inch, 2021)
      macOS Tahoe 26.3
      Operations - Windows11
      Chrome - Version 145.0.7632.160 (Official Build) (64-bit)
      Safari- Version 26.3
      JAWS- Version 2023
      NVDA- Version 2025.3.2
      VoiceOver - Version Latest

              Assignee:
              Cathy Li
              Reporter:
              Chirag Goyal
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: