All Work | List View: Sortable table headers produce confusing and redundant announcements for screen reader users

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The “All Work” table’s column sorting produces confusing and redundant announcements for screen reader users.

      Steps to Reproduce

      1. Open the Jira/JSM Cloud homepage.
      2. Navigate to the Sidebar, expand "Spaces", and open any space.
      3. Navigate to the "List" link, activate it, and open any work item from the data table.
      4. Navigate to the "Assignee" section and activate "More information about Chirag Goyal," then activate the "Assigned work items Chirag Goyal" link.
      5. Using a screen reader, navigate to the data table.
      6. Navigate table headers using Ctrl  Alt  Arrow (Windows) or Ctrl  Option  Arrow (macOS) with a screen reader.
      7. Observe that column header sorting produces redundant and confusing screen reader announcements.

      Screen Recording

      Sorting Announcement Issue

      Actual Results

      The “All Work” table’s column sorting is technically operable with a screen reader and keyboard, but navigating the headers (Ctrl  Alt  Arrow on Windows with JAWS/NVDA, Ctrl  Option  Arrow on macOS with VoiceOver) produces confusing and redundant announcements. Multiple ARIA attributes and nested interactive elements merge the column header, sort button, and more-actions menu in screen reader output, making it difficult to identify the column, current sort state, and available actions. This results in a confusing and inaccessible experience for screen reader users trying to understand or interact with table sorting.

      Expected Results

      Screen reader users should be able to navigate and interact with table column sorting without redundant or confusing announcements.

      Apply the following changes:

      • Remove aria-label from the <th> element.
      • Remove aria-roledescription="Sort Button" from nested <button> to prevent redundant announcements.
      • Move the column header text inside the <button> so the screen reader announces it naturally.
      • Keep aria-sort="none" | "ascending" | "descending" only on <th>, updating dynamically on user interaction.

      For guidance on creating accessible sortable tables, refer to Sortable Table Example.

      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.

      <table>
        <thead>
          <tr>
            <th scope="col" aria-sort="ascending">
              <button>Assignee</button>
            </th>
            <!-- Other column headers -->
          </tr>
        </thead>
        <!-- Table body -->
      </table>

      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 146.0.7680.154 (Official Build) (64-bit)
      Safari- Version 26.3
      JAWS- Version 2023
      NVDA- Version 2025.3.2
      VoiceOver - Version Latest

              Assignee:
              nithin
              Reporter:
              Chirag Goyal
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated: