[a11y][Checkbox]: Checkbox text is not read by VoiceOver when accessibleNameRef is provided

[volha-arkhipenka-sap]

Bug Description

When accessibleNameRef is provided, the text of Checkbox is not read by VoiceOver. Only label is announced, and text is omitted.

Code snippet:

 <>
  <Label id="checkbox_label_id" for="checkbox_id" showColon={true}>
    Checkbox label
  </Label>
  <CheckBox
    id="checkbox_id"
    text="Checkbox text"
    accessibleNameRef="checkbox_label_id"
  />
</>

Affected Component

No response

Expected Behaviour

Both label and checkbox text are announced by VoiceOver.

Isolated Example

https://sap.github.io/ui5-webcomponents/nightly/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG5cblxuPGhlYWQ-XG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbiAgICA8bGluayByZWw9XCJzdHlsZXNoZWV0XCIgaHJlZj1cIi4vbWFpbi5jc3NcIj5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG4gIDx1aTUtbGFiZWwgaWQ9XCJsYWJlbF9pZFwiPkNoZWNrYm94IGxhYmVsPHVpNS1sYWJlbC8-ICBcbiAgPHVpNS1jaGVja2JveCB0ZXh0PVwiQ2hlY2tib3ggdGV4dFwiIGFjY2Vzc2libGUtbmFtZS1yZWY9XCJsYWJlbF9pZFwiPjx1aTUtY2hlY2tib3gvPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuICAifSwibWFpbi5qcyI6eyJuYW1lIjoibWFpbi5qcyIsImNvbnRlbnQiOiIvKiBwbGF5Z3JvdW5kLWhpZGUgKi9cbmltcG9ydCBcIi4vcGxheWdyb3VuZC1zdXBwb3J0LmpzXCI7XG4vKiBwbGF5Z3JvdW5kLWhpZGUtZW5kICovXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtZmlvcmkvZGlzdC9TaWRlTmF2aWdhdGlvbi5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWZpb3JpL2Rpc3QvU2lkZU5hdmlnYXRpb25JdGVtLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtZmlvcmkvZGlzdC9TaWRlTmF2aWdhdGlvbkdyb3VwLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtZmlvcmkvZGlzdC9TaWRlTmF2aWdhdGlvblN1Ykl0ZW0uanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1maW9yaS9kaXN0L1NpZGVOYXZpZ2F0aW9uR3JvdXAuanNcIjtcblxuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvaG9tZS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvY2hhaW4tbGluay5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvZ3JvdXAuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2xvY2F0ZS1tZS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvY2FsZW5kYXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2hpc3RvcnkuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2N1c3RvbWVyLmpzXCI7In0sIm1haW4uY3NzIjp7Im5hbWUiOiJtYWluLmNzcyIsImNvbnRlbnQiOiJkaXYge1xuXG59In19

Steps to Reproduce

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

2.8.0

Browser

Chrome

Operating System

macOS

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @volha-arkhipenka-sap,

I've prepared an example to illustrate that this is the expected behavior, as it works in the same way with native elements: JSBin Example

Please also refer to the official WAI-ARIA specification for name calculation: https://www.w3.org/TR/wai-aria-1.2/#namecalculation

In our case, accessibleNameRef serves as an alternative to aria-labelledby.

I'm forwarding this issue to the responsible team to verify whether the checkbox is intended to have an associated label and to clarify the expected usage in such scenarios.

---

Hello @SAP/ui5-webcomponents-topic-p,

Could you please take a look when you have a moment?

Best regards,
Nayden

[NakataCode]

Hi @volha-arkhipenka-sap,

To clarify the accessibility behavior:

This is the expected behavior according to the WAI-ARIA 1.2 specification for name computation, as well as the checkbox specification. When accessibleNameRef is used (corresponding to aria-labelledby), it follows the standard naming precedence:

1. The accessibleNameRef takes priority as the accessible name source.
2. As a result, the referenced label is the only content announced by screen readers.
3. The text property of the checkbox is secondary in this case and is not included in the accessible name by default.

Regarding expected usage:
If the goal is to have both the label and the checkbox text announced, one suggestion would be to include both pieces of content in the referenced label elements used in accessibleNameRef.

Does this explanation answer your question, or is there anything else we can help clarify?

Best regards,
Nikola

[NakataCode]

Hello,

I'll go ahead and close the issue for now.
If any further questions come up or if anything needs clarification, feel free to reopen it or reach out.

Best regards,
Nikola

[github-actions]

This issue has been closed. To reopen, just leave a comment!