[BITV] 9.1.3.1e/8.1 - The user table represents a grid element and should be implemented as such. (1)

[AndyScherzinger]

⚠️⚠️⚠️ Regression after table implementation: #38424

At the moment, the data is implemented in an unstructured manner using "div" elements. More information on grid implementation can be found at the following URLs: https://sarahmhigley.com/writing/grids-part1/, https://sarahmhigley.com/writing/grids-part2/ or https://www.w3.org/WAI/ARIA/apg/patterns/grid/.

• enh(a11y): Users table #39050
• feat: Set custom element tags Akryum/vue-virtual-scroller#825

If upstream additions can't be made

• enh(settings): Semantic user table markup #40719

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-3f0ff0bc0e-v8-n1

[michaelnissenbaum]

@JuliaKirschenheuter I would say we have a situation where the solution lies somewhere in the middle. But I would say we can also implement it as a normal table instead of a grid.

[JuliaKirschenheuter]

#38424

[Pytal]

Please verify the table semantics on https://try.nextcloud.com/ltd/a11y/index.php/settings/users @michaelnissenbaum and let us know if adjustments should be made :)

[michaelnissenbaum]

Hi @JuliaKirschenheuter. You're on the right track, BUT in the case of tables, it is important not to mix ARIA roles and HTML elements, which you have done here. Either the table should be implemented entirely with ARIA roles or solely with HTML elements, without mixing them. You can find a good description at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role.

[Pytal]

The usage of both HTML elements and roles in the markup here is a technical limitation and did not seem optimal at first but given that browser engines interpret these semantics correctly i.e.

(from Firefox devtools)

and as a result provides the correct information to screenreaders, is this an acceptable solution @michaelnissenbaum?

[michaelnissenbaum]

Hi @JuliaKirschenheuter. Unfortunately, with such a mix of HTML elements and ARIA roles, it cannot be guaranteed that all screen readers will correctly render the table across all browsers. I would strongly advise against using such a mixed approach in this case.

[JuliaKirschenheuter]

Thanks a lot @michaelnissenbaum for this advice!
@michaelnissenbaum unfortunately we can't create a whole HTML table in that case because of technical limitations ;( Would it be ok if we would use only ARIA roles without HTML elements?

[Pytal]

Ultimately it's best to use HTML elements instead of hacking vue-virtual-scroller so I'll do it the in-house way à la https://github.com/nextcloud/server/blob/feat/f2v/files/apps/files/src/components/VirtualList.vue

[Pytal]

Any things we should take into account with VirtualList 👆 @skjnldsv? Shall we copy-n-adapt for users or abstract it into a reusable table component?

[skjnldsv]

Well, I don't know about the latest a11y hacks, but we're fully using official semantic for a table.
I don't have much time to dive into why we need rowgroups or such, there is probably some more changes needed (like scope attributes), but we should indeed take the latest VirtualList.vue component in #39808 yes :)

https://a11y-101.com/development/tables

[AndyScherzinger]

Thanks a lot @michaelnissenbaum for this advice!
@michaelnissenbaum unfortunately we can't create a whole HTML table in that case because of technical limitations ;( Would it be ok if we would use only ARIA roles without HTML elements?

@michaelnissenbaum any comment on this and subsequent comments?

[michaelnissenbaum]

From my perspective, there's nothing preventing us from implementing the table entirely with ARIA. You can find the description here: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/table/.

[Pytal]

Let's see if the maintainer takes a look soon

• feat: Set custom element tags Akryum/vue-virtual-scroller#825

If not, plan ARIA it is

[skjnldsv]

@Pytal you can also use the component Files is using.
https://github.com/nextcloud/server/blob/master/apps/files/src/components/VirtualList.vue

[AndyScherzinger]

@Pytal can this item be considered done for the moment or are there any open items? If So can you please add them to the top issue description? Thanks!