[DynamicPage]: No Dynamic Page Title provided as an accessibility name for the container

[anatoliySAP]

Describe the bug

The Dynamic Page component doesn't use Title as an accessibility name for the container.

https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-dynamicpage--default

Accessibility tree does not contain a container with 'Page Title' text:

Isolated Example

No response

Reproduction steps

1. Open ui5-webcomponents-react sampler page: https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-dynamicpage--default
2. Open Developer Tools -> Accessibility -> Switch to Accessibility Tree View
3. Observe current behavior

Expected Behaviour

One of the containers contains 'Page Teitle' as an accessibility name

e.g. as it was in sapui5 components. https://sapui5.hana.ondemand.com/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageAnalyticalTable

Screenshots or Videos

No response

UI5 Web Components for React Version

2.10.0

UI5 Web Components Version

2.10.0

Browser

Chrome

Operating System

Windows

Additional Context

The bug is reproduced on all platforms, but there is no such option to specify.

Relevant log output

Organization

No response

Declaration

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

[kasarabtanya]

Affected Accessibility checkpoint: ACC-246.1

[Lukas742]

Hi @anatoliySAP

the header text is read by screen readers as it's defined via aria-labelledby, so I don't see a violation here. Still, as the component is developed by the UI5 Web Components team, I'll forward this issue to their repo, so the responsible team can check.

---

Hi Colleagues, could you please take over?

[nnaydenow]

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

Could you please take a look?

Regards, Nayden

[NakataCode]

Hi @anatoliySAP,

Thank you for the report. I've checked this against the spec, and there's no requirement for the Dynamic Page container to have an accessible name derived from the title.

According to the spec, the accessibility requirements are: Title: Should be marked as a heading with role="heading" Header: role="region" with aria-label for expanded/collapsed states

As this follows the spec, I'll proceed with closing this issue. If you have any other questions or additional context, feel free to reopen it.

Best Regards, Nikola

[github-actions[bot]]

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

[kasarabtanya]

Hello @NakataCode, could you please provide the link to the spec you are reffering to?

[anatoliySAP]

Hello @NakataCode, Thank you for your response and for taking the time to review the issue.

Probably, I've incorrectly described the initial bug about "Dynamic Page container", but I'm still sure that the title should appear in the accessibility tree.

Regarding the specification you mentioned, unfortunately, I wasn’t able to locate or access the exact reference. However, I have been working from the WAI-ARIA recommendations (https://www.w3.org/TR/wai-aria/), which clearly specify the purpose of accessibility:

Accessibility of web content requires semantic information about widgets, 
structures, and behaviors, in order to allow assistive technologies to convey 
appropriate information to persons with disabilities.

One of the useful techniques - naming regions and landmarks described here: https://www.w3.org/TR/WCAG20-TECHS/ARIA13.html

And the old version of components followed this technique (see: https://sapui5.hana.ondemand.com/#/entity/sap.f.DynamicPage/sample/sap.f.sample.DynamicPageAnalyticalTable)

The header was represented by a semantically meaningful element with an appropriate accessibility label. This allowed all nodes in the accessibility tree to be clearly associated with a specific title - improving context and navigation for screen reader users.

In contrast, the current implementation of components (https://sap.github.io/ui5-webcomponents-react/v2/?path=/story/layouts-floorplans-dynamicpage--default)

represents the entire page as "Header Expanded." This lacks semantic clarity. Not only does it provide little contextual value (i.e., it doesn't convey what the header is), but it also introduces potential confusion. For example, "Header Expanded" implies the presence of toggle behavior, even in cases where no such interaction is implemented.

Since the approach for named landmarks changed between library implementations by downgrading accessibility support, I still think that it is a bug. Also, I believe that fixing it will significantly improve the accessibility of all applications that use the library.

Regards, Anatoliy

[NakataCode]

Hi @anatoliySAP, thank you for the detailed feedback! The current implementation aligns with our internal specification for DynamicPage headers.

What you're requesting - using the page title as the accessible name instead of the header state - would be an enhancement to the current specification rather than a bug fix. As per our process, feature requests that involve changes to accessibility specifications need to go through the inner source process with Central Design.

Could you please create a Jira item for Central Design to evaluate this enhancement and include the E1 reference number here?

Let me know if you have questions!

Best Regards, Nikola

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.