View page: Non-descriptive labels for buttons

XMLWordPrintable

    • Severity 3 - Minor
    • Accessibility

      Issue Summary

      Non-descriptive labels, such as "tab0", "tab1", "tab2", and so on, have been assigned to the carousel controls.

      Steps to Reproduce

      1. Open the Confluence Cloud homepage.
      2. Navigate to any existing page containing a carousel component.
      3. Using a screen reader, navigate through the carousel controls, play/pause control, and navigation elements.
      4. Observe that the labels for these controls are non-descriptive.

      Screenshot 1

      Screenshot 2

      Screenshot 3

      Actual Results

      The carousel controls have been assigned non-descriptive labels such as "tab0", "tab1", "tab2", and so forth. Additionally, the pause/play control and the next/previous slide navigation controls use generic labels such as "Pause", "Play", "Next", and "Previous" rather than meaningful, descriptive labels that provide context.

      As a result, screen reader users may have difficulty understanding the purpose and functionality of these controls.

      Expected Results

      The screen reader should announce unique and descriptive labels for the buttons.

      In this context, assign unique and descriptive labels to all carousel controls using the aria-label attribute. Examples include "Slide 1 of 3" and "Slide 2 of 3" for individual slides; "Pause auto rotation" and "Start auto-rotation" for pause/play controls; and "Previous slide" and "Next Slide" for navigation elements.

      Note: Before implementing the labels for carousel controls. Kindly consult with the content design team for suggestion/approval.

      For more information, please refer to this link: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/

      Code snippet:

      <div role="group" aria-roledescription="carousel" aria-label="Featured content">
      <div role="tablist" aria-label="Slides">
      <button aria-label="Slide 1 of 3" aria-selected="true" ...>
      ...
      <button aria-label=""Pause auto-rotation" ...> 
      ...
      <button aria-label="Previous slide" ...> 
      ...
      </div>
      </div>

      Note: 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.

      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 26.5.1
      Windows - 11 pro
      Chrome - Version 148.0.7778.97 (Official Build) (arm64)
      Safari - Version 26.5 (21624.2.5.11.4)
      JAWS - Version 2026
      NVDA - Version 2024.4.2.35031
      Voiceover - Version Latest

              Assignee:
              Edwin Del Bosque
              Reporter:
              Anusooya .
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated: