kgogov
commented
2 months ago Hello @Nakul-Narwal,
Thank you for sharing your findings. I carefully reviewed the description and example you provided.
Based on the information available in the documentation, it states:
Note: This usually indicates that user input (bound with the for property) is required. In that case, the required property of the corresponding input should also be set.
I applied the required attribute to the Input element and found that JAWS correctly identifies the field as required without mentioning the * symbol.
Could you please verify this on your side? Thank you!
Regards, Konstantin Gogov UI5 Web Components GitHub Dispatcher
github-actions[bot]
Bug Description
The ui5-label component in @ui5/webcomponents has accessibility issues:
Screen readers announce the asterisk (*) symbol for required fields, though it’s decorative and should be hidden. The required attribute is not read out by screen readers, missing the necessary indication for mandatory fields. Inconsistencies in how required information is handled across different versions. Steps to Reproduce:
Set required property on ui5-label. Check with a screen reader. Expected Behavior:
Asterisk should be hidden from screen readers. Required status should be announced by screen readers. Environment:
UI5 Web Components for React Version: 1.8.0 UI5 Web Components Version: 1.10.3 Browser: Chrome, Edge
Affected Component
'ui5-label'
Expected Behaviour
Asterisk (*) Handling:
The asterisk (*) used for indicating required fields should be hidden from screen readers to avoid unnecessary announcements. Required Attribute Announcement:
When the required property is set on the ui5-label, the screen reader should announce that the field is required, providing clear indication of its mandatory status to users. Consistent Accessibility:
Ensure consistent behavior across different versions and components regarding the handling of required fields and their announcements.
Isolated Example
https://stackblitz.com/edit/github-wcwdgu-yepzx9?file=src%2FApp.tsx
Steps to Reproduce
1.Create a ui5-label Component: Use the ui5-label component in your project and set its required property to true. 2.Inspect the Label: Ensure the label text includes a required indicator, like an asterisk (), next to it. 3.Test with a Screen Reader: Use a screen reader (e.g., JAWS) to read the label. 4.Observe Announcements: Check if the screen reader announces the asterisk () symbol and whether it mentions that the field is required. 5.Verify Across Browsers: Repeat the above steps in different browsers (e.g., Chrome, Edge) to ensure consistent behavior.
Log Output, Stack Trace or Screenshots
Priority
High
UI5 Web Components Version
UI5 Web Components Version: 1.10.3
Browser
Edge
Operating System
Operating System: Windows
Additional Context
The accessibility issues with the ui5-label component could significantly impact users relying on screen readers, leading to confusion about required fields and potentially hindering the usability of forms. This may affect user experience and accessibility compliance, which is crucial for inclusive design and meeting accessibility standards.
Business Impact:
User Experience: Users with visual impairments may struggle to understand form requirements, leading to errors and frustration. Compliance: Ensuring accessibility is vital for meeting legal requirements and maintaining inclusive design practices. Reputation: Addressing accessibility issues promptly supports the company's commitment to accessible and user-friendly products.
Organization
Organization: SAP
Declaration