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.
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
- Open MCT is running, and can be accessed by pointing a web browser at http://localhost:8080/
- Locate the View Switcher button showing a visible label like “List View” or “Grid View”
- Open browser devtools and inspect the button element
- Observe that the element has an aria-label="Open the View Switcher Menu" while the visible label text is “List View” or “Grid View”
- 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
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
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:
This mismatch can confuse screen reader users because the spoken label differs from what sighted users see on screen.
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
“Accessible name must match or contain the visible label text”Environment
Impact Check List
Additional Information
Open the View Switcher Menu for List View