Uploaded image for project: 'Confluence Cloud'
  1. Confluence Cloud
  2. CONFCLOUD-81363

Missing Visual Indicator and Inaccessible Click Event for Table Header Sorting

XMLWordPrintable

      Issue Summary

      On a table in Confluence (cloud), a click event is incorrectly applied to the table header to sort the columns. However, there is no visual indicator to suggest that the table header is interactive, and the header cannot be accessed using the tab key. This creates an accessibility barrier for users relying on keyboard navigation or screen readers, as they are unable to discover or interact with the sorting functionality.

      Steps to Reproduce

      1. Open a Confluence cloud page containing a table with sortable columns.
      2. Navigate to the table header using a mouse or keyboard (Tab key).
      3. Try to interact with the column header (click or focus) to sort the table.
      4. Observe that the header does not have a visual indicator of its interactivity, and it cannot be accessed using the Tab key.
      5. Test the page with a screen reader, and note that the sorting functionality is not announced.

      Screen Recording

      Screen Recording 2025-04-10 at 11.04.01 AM.mov

      Screenshot

      Actual Results

      The table header behaves as if it is clickable for sorting but does not have any visual indication that it can be interacted with (e.g., no icon or button style).
      The header cannot be reached or activated using the Tab key, making it inaccessible for users relying on keyboard navigation.
      No accessible name is provided for screen readers to indicate that the header has sorting functionality.This made it difficult for keyboard-only and screen reader users to access the functionality.

      Expected Results

      Ensure that the sorting functionality is fully operable with both a keyboard and a screen reader.

      Apply the following changes:

      • The button should have a clear visual indicator (such as an icon or tooltip) to signify its interactive nature.
      • The button should be accessible via the Tab key for keyboard users.
      • The button should have an appropriate ARIA label or accessible name so that screen readers can announce it as a sort button.

      Note: Please refer to the sorting functionality of the table header in the "Tables" macro, and ensure that tables generated using the "Page Properties" macro are updated to use a button element (similar to the filter button in other tables within the platform).

      Refer to the following resource to create accessible sorting functionality:
      https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/Additionally,
      Sortable Table Example

      Workaround

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

              758fccad975c Jesse Zuniga (Inactive)
              153f1fd15216 Rogerpinto Marialouis (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

                Created:
                Updated:
                Resolved: