Skip to content

Accessibility Violation: Screen reader users hear a different label than the visible “List/Grid View” button in View Switcher #8249

@huangkevin-apr

Description

@huangkevin-apr

Summary

The View Switcher button displays a visible label such as “List/Grid View”, but its accessible name (aria-label) is “Open the View Switcher Menu”, which does not match or contain the visible label text.
This triggers an accessibility violation in IBM Equal Access Accessibility Checker:

  • Rule: Accessible name must match or contain the visible label text
  • Issue: Accessible name does not match or contain the visible label text

This mismatch can confuse screen reader users because the spoken label differs from what sighted users see on screen.

Image Image

Why is this important?
Speech-input users navigate to an input field by speaking the visible field label (i.e., text displayed on the screen). Their verbal command activates the interactive component’s programmatic accessible name and sets focus to the component. A point of failure occurs when the visible label and the accessible name are different, or the visible label text string is not contained within the accessible name value.

Expected vs Current Behavior

Expected:
The button’s accessible name should match or contain the visible label text (e.g., include “List View”) so assistive technology users receive consistent information.

Current:
The button shows “List View” visually, but the accessible name is “Open the View Switcher Menu”, which does not include the visible label text.

Steps to Reproduce

  1. Open MCT is running, and can be accessed by pointing a web browser at http://localhost:8080/
  2. Locate the View Switcher button showing a visible label like “List View” or “Grid View”
  3. Open browser devtools and inspect the button element
  4. Observe that the element has an aria-label="Open the View Switcher Menu" while the visible label text is “List View” or “Grid View”
  5. Run IBM Equal Access Accessibility Checker and confirm it reports: “Accessible name must match or contain the visible label text”

Environment

  • Open MCT Version: v4.1.0 released this Feb 5, 2025
  • Deployment Type: npm dev
  • OS: Linux, Windows
  • Browser: Edge

Impact Check List

  • Data loss or misrepresented data?
  • Regression? Did this used to work or has it always been broken?
  • Is there a workaround available?
  • Does this impact a critical component?
  • Is this just a visual bug with no functional impact?
  • Does this block the execution of e2e tests?
  • Does this have an impact on Performance?

Additional Information

  • Accessibility tool: IBM Equal Access Accessibility Checker
  • Reported rule: Accessible name must match or contain the visible label text
  • Suggested fix: Update the accessible name to include the current view name, e.g.
    Open the View Switcher Menu for List View

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions