Expand Macro | Page View: Inappropriate heading structure

XMLWordPrintable

    • Severity 3 - Minor
    • CtB - Improve Existing
    • Accessibility

      Issue Summary

      The Expand macro is configured with a fixed heading level, which cannot be adjusted.

      Steps to Reproduce

      1. Open the Confluence DC/Server instance.
      2. Navigate to "Spaces" in site navigation and open any space.
      3. Open a page that contains Expand macro content.
      4. Navigate to the main content area and inspect the expand titles.
      5. Note that an incorrect heading level is specified.

       

      Screen Recording

      https://jira.atlassian.com/secure/attachment/496943/Inappropriate%20heading%20structure.mp4

      Actual Results

      When screen reader users navigate the "Expand Macro Test" page using the Down arrow key or the "H" shortcut (which moves focus from one heading to the next), the heading structure is found to be inappropriate.

      Expand heading controls such as "HTML", "CSS", "JS", and similar are incorrectly marked up as level 6 headings using the <div role="heading" aria-level="6"> element.
      These headings should instead be rendered at heading level 3 to reflect the appropriate content hierarchy.

      This issue occurs because the Expand macro assigns a fixed heading level (level 6) to its title. Currently, there is no option available for users to customize the heading level according to their content structure needs.

      As a result, screen reader users may find it difficult to understand and navigate the page's content hierarchy effectively.

      Expected Results

      Ensure that the heading elements should be used in a way that reflects the logical structure of the content.

      The heading levels should be applied semantically and consistently to indicate the relationship between different sections of the page.

      Users of assistive technologies should be able to navigate headings in a way that accurately represents the page’s structure, supporting comprehension and efficient interaction.

      Apply the following changes:

      • Modify the Expand macro to allow for configurable heading levels, enabling authors to select appropriate semantic levels according to the content hierarchy.
      • Replace <div role="heading" aria-level="6"> with native HTML heading elements (<h1>–<h6>) if possible.
      • Use heading levels sequentially and logically to maintain semantic clarity and accessibility.

       

      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 Sonoma 14.7
      Operations - Windows11
      Chrome - Version 135.0.7049.42 (Official Build) (64-bit)
      Safari- Version 18.0
      Firefox- Version 135.0 (64-bit)
      JAWS- Version 2023
      NVDA- Version 2024.4.2
      VoiceOver - Version Latest

        1. Inappropriate heading structure.mp4
          30.49 MB
          Chirag Goyal
        2. Expand Macro Fixed.mp4
          18.33 MB
          Chirag Goyal

            Assignee:
            Judy Lim
            Reporter:
            Chirag Goyal
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved: