A11y Test | Advanced Roadmaps: Data table not programmatically defined

XMLWordPrintable

    • 10.03
    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The data table is not programmatically defined.

      Steps to Reproduce

      1. Open the Jira DC homepage.
      2. In the Site navigation section, locate the Plans control, expand it, and open any available plan.
      3. Using a screen reader, navigate to the data table in the main content area.
        1. Windows (JAWS / NVDA): Press T to move to the next table
        2. macOS (VoiceOver): Press Ctrl + Option + Command + T to move to the next table
      4. Attempt to navigate within the table structure:
        1. Windows (JAWS / NVDA):
          1. Press Ctrl + Alt + Arrow keys to move between rows and columns
          2. Press Ctrl + Alt + Home/End to move to the first or last cell
        2. macOS (VoiceOver):
          1. Press Ctrl + Option + Shift + Down Arrow to interact with the table
          2. Use Ctrl + Option + Right/Left Arrow to move between columns
          3. Use Ctrl + Option + Up/Down Arrow to move between rows
      5. Observe that the content is not announced as a table, and table navigation commands do not function as expected, indicating that the data table is not programmatically defined.

      Screen Recording

      Table Issue

      Actual Results

      When screen reader users navigate to the “A11y Test Roadmap” table, the content—such as “Select all issues”, “#”, “Issue”, and other headers—is visually presented as a data table but is not marked up programmatically as a table. As a result, screen reader users cannot perceive the table structure, including rows, columns, and header-cell relationships, making it difficult to understand the content and navigate the table effectively. This lack of semantic markup renders the table inaccessible to assistive technologies.

      Expected Results

      The content should be programmatically defined as a table so that screen readers correctly announce all rows, columns, and headers associated with each data cell.

      Native table markup (<table>, <tr>, <th>, <td>) should be used to present the content as a proper data table.

      Alternatively, if a native HTML table is not feasible, the table can be implemented as an ARIA grid by applying:

      • role="grid" on the container
      • role="row" on each row
      • role="columnheader" or role="rowheader" for headers
      • role="gridcell" for data cells

      Headers should be associated with their corresponding cells using aria-labelledby or aria-describedby. All interactive elements must be keyboard accessible, supporting standard grid navigation (Arrow keys, Home/End, Ctrl + Arrow keys where applicable).

      For guidance on creating an accessible data grid, refer to the Accessible Data Grid Example.

       

      Note: Please consult with the ADS team before implementing a fix for this issue to determine the most appropriate approach.

      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.1
      Operations - Windows11
      Chrome - Version 143.0.7499.170 (Official Build) (64-bit)
      Safari- Version 26.1
      JAWS- Version 2023
      NVDA- Version 2025.3
      VoiceOver - Version Latest

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

              Created:
              Updated: