search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

Label: A11y Query: Is "colon" supposed to be read by screenreaders #9195

Closed abhijeet181088 closed 3 months ago

abhijeet181088 commented 5 months ago

Describe the bug

This is a consulting question.

When showColon={true} param is passed to the Label component, it adds colon after the label. Are the screenreaders supposed to read it?

I see aria-hidden="true" for the colon, which makes sense. Just want to make sure that it is intentional and as per a11y guidelines.

As per our accessibility testing team, in reading mode, even ":" should be read, which is not the case here.

Isolated Example

https://stackblitz.com/edit/github-myzwsj?file=src%2FApp.tsx

Reproduction steps

Query mentioned in description.

Expected Behaviour

Consulting question.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

Lukas742 commented 5 months ago

Hi @abhijeet181088

I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

GerganaKremenska commented 3 months ago

Hello @abhijeet181088,

When used as label-value pairs in display-only forms and reading it in screen reader reading modes by arrow keys:

Label and value must be separated by a spoken colon (“:”) to know when label ends and value starts.

But when it is used wiht some ind of an input the colon should be omited since the anouncment is separated when we enter the input component.

Best Regards, Gergana