Create Page: ARIA label specified incorrectly for the inline links

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      The "aria-label" attribute is specified incorrectly for the "Google" inline link.

      Steps to Reproduce

      1. Open the homepage of Confluence.
      2. Navigate to the header, activate "Spaces", and open any space.
      3. Navigate to the main content area and open any page.
      4. Navigate to the "Edit this page" link and activate it.
      5. Navigate to the editor and insert a link using the "CTRL+K" keyboard shortcut.
      6. Navigate to the "Search or paste link" field and type the URL "https://www.google.com".
      7. Navigate to the "Display Text" field and type "Google" and activate "Insert" button.
      8. Press the "ALT+F10" keyboard shortcut to move to the floating toolbar, then activate the "Inline" button.
      9. Navigate to "Update" and activate it.
      10. Navigate to the inserted link and inspect the code.
      11. Observe that the "aria-label" is added incorrectly.
      12. Using a screen reader, navigate to the inserted link and observe that it reads the URL instead of the specified display text.

      Screen Recording

      Screen Recording Inline Link.mkv

      Actual Results

      When screen reader users navigate to the inline link on the page using the "Tab" or "Down Arrow" key, the screen reader does not announce the visible text of the link. Instead, it reads the link as "https://www.google.com" rather than the visible text "Google".

      This occurs because the "aria-label" attribute is incorrectly specified on the <a> element of the link.

      This creates a poor experience for screen reader users, as they have to listen to the URL instead of the link text.

      Expected Results

      ARIA attributes should be used appropriately with correct semantics, and their unnecessary usage should be avoided.

      In this scenario, remove the "aria-label" attribute from the <a> element.

      Code Snippet:

      <a href="https://www.google.com" class="css-118vsk3 e26bri0">
        <span class="css-1cwva94 e1a3lu072">
          <img class="smart-link-icon" src="https://www.google.com/favicon.ico" alt="">
          <span class="smart-link-title-wrapper">Google</span>
        </span>
      </a>
       

      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 131.0.6778.70 (Official Build) (64-bit)
      Safari- Version 18.0
      Firefox- Version 131.0.3 (64-bit)
      JAWS- Version 2023
      NVDA- Version 2024.4
      VoiceOver - Version Latest

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

              Created:
              Updated:
              Resolved: