Audit #1 – General Overview when logged in – List of files and folders is no data table, should be

[marcus-herrmann]

Connected to Audit 1, see #4300
1.2 General Overview when logged in, URL: https://ocis-a11y.owncloud.works/#/files/list

Issue

Central list of files and folders is not marked up in the HTML as a data table, but is one in my opinion (a two dimensional data matrix with headers that describe the purpose of the columns underneath them).

Remediation

Use table instead of a div construct: https://developer.mozilla.org/de/docs/Web/HTML/Element/table

[kulmann]

@marcus-herrmann we are working on a new data table component for the files list(s) in this sprint (now until 22nd of January). When thinking about the possibilities for keyboard navigation we came up with the following ideas:

• Keyboard navigation for rows and columns is solved with arrow keys, page up/down and home/end, like stated in the Keyboard Support section of this page: https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html
• the TAB key is supposed to move the focus from one interactive element to the next. With a strict interpretation that would mean, that we the following happens, each time hitting TAB once:
  • 1: focus the first resource name
  • 2: move the focus to the first indicator below the resource name, if it exists
  • 3: move the focus to the second indicator below the resource name, if it exists (and so on with indicators)
  • 4: move the focus to the first quick action
  • 5: move the focus to the second quick action (and so on with quick actions)
  • 6: move the focus to the button that allows to open the right sidebar
  • 7: move the focus to the second resource name (first interactive element in the next table row)

Do you have more insights/hints for us on this?

[marcus-herrmann]

@kulmann Sorry, I was not precise enough: With data table I actually meant <table>, not ARIA grid.

Background: It's not necessary here. And with all things ARIA, prefer the HTML solution.

Adrian Roselli, Freelacne a11y specialist I look up to, writes (https://adrianroselli.com/2020/07/aria-grid-as-an-anti-pattern.html#Wrap):

Before using ARIA grid on a project, identify your goals and be prepared to test with users.

If you want an Excel-like experience, ARIA grid may be a good fit. If all you want is the ability to sort, have fixed headers, and hold a few text inputs, then using grid is probably overkill.

Also, Sarah Higley (Microsoft) agrees (https://sarahmhigley.com/writing/grids-part1/):

Grids differ from tables in how they support interactivity: all cells are focusable and keyboard navigable, and the general idea is that many if not all of the cells will support some type of user action. […] If most of the cells are not interactive, then it seems likely that a table would be a better choice than a grid.

Please bear in mind that "vanilla" tables are already navigable in Screen Readers without the need to make everything tabbable/focusable inside them. So in this case I recommend a good old boring table instead of an unnecessary complex grid widget (that suggest every cell is editable like in Excel).

[marcus-herrmann]

Regarding focus order/tab index: leave it the "natural"-/DOM-order-way.

[kulmann]

No worries, we understood that you meant <table>. We were just looking for meaningful keyboard navigation in different directions as well. If we can leave that untouched, even easier for us. Thanks for taking care! :-)

[pascalwengerter]

Closing this since #5018 is merged and we're waiting for feedback (and will open new tickets with the requested changes from the a11y audit)