screen reader logical reading order issue in dynamic page layout header section

[anuvenkatesh1]

Discussed in #3267

^{Originally posted by anuvenkatesh1 July 19, 2022}
One of our pages use the dynamic page layout component, which has the object header and content part just above the table.
The reading order is Title & Status (1, 2) -> all buttons -> then the other details (location/availability etc) are read in screen reader Browse mode. May be in the context of this test page is ok.

However, in the context of our page ( its about goals that we create and this page has the goal details. The object page header summarizes the details) and so it would make sense for a screen reader user to read all the details on the left first before moving on to the actions that can be taken on them ie in the context of the above dynamic page layout component, we want the title/status/updated/location/availability etc to be read first, before reading the buttons.
Please note that in our page we do not have the "collapse" button to collapse the header content area.

Below are the screenshots.

Due to current structure of the object header, unable to change the reading order. What's the workaround? How to achieve this?

[don-obrien]

@MarcusNotheis @Lukas742
Can we get an update on this one? I see the bug tag. Is this a bug, or does the reporter need advice on implementation?

[Lukas742]

Hi @don-obrien

I didn't find the time yet to take a deeper look into this, but I plan to check it out tomorrow. If we need more input from the reporter we will ask for the necessary information here and add the "author action" label.

[Lukas742]

Hi @anuvenkatesh1

I could not reproduce the reading order in your first example. Per default, so without setting e.g. tab-index or programmatically changing the focused element, only the interactive items are being focused and therefore read out.

What screen reader are you using and is there an option I have to enable somewhere to get the same behavior as you?

[GongRichard]

Hi @Lukas742,
You can use this page https://github.wdf.sap.corp/pages/xweb/team-goal/app/?templateId=1&mock#/detail?id=1 to reproduce this issue. I think @anuvenkatesh1 used JAWS as screen reader.
Thanks,
Richard

[Lukas742]

Hi @GongRichard

I could reproduce the described behavior using JAWS, but unfortunately I don't think there is much we can do. It seems like JAWS is reading the entries according to the DOM structure, which is the expected behavior in my opinion. Furthermore, it's the same behavior as with SAPUI5. As I'm not that familiar with JAWS I'm not sure if you can configure that behavior by e.g. setting attributes or changing the tab-index. However, this would then also have to be changed by the app developer (yourself), as all elements can be accessed via props or by passing the attributes/props to the component (e.g. Title) itself.

[don-obrien]

Is this still in author action? Do you need more info from @GongRichard ?

[Lukas742]

Hi @don-obrien

please refer to my last comment.