DataViews: Improve keyboard accessibility in grid layout #56330
Labels
[Feature] Data Views
Work surrounding upgrading and evolving views in the site editor and beyond
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
[Type] Enhancement
A suggestion for improvement.
Related: #55083
What problem does this address?
Currently every focusable element (or "widget") in a list layout (header action buttons, linked items, etc) presents as its own tab stop. This can make it difficult and tedious for a non-mouse user to move across content.
What is your proposed solution?
We should utilise an interactive grid to reduce the number of tab stops on the page, and allow users to more efficiently navigate the data:
We will have to be careful however how we implement this pattern. At first glance, we might say that each card is a cell within the grid, and directional navigation keys could be used to jump from card to card:
This makes it hard to navigate the interactive elements within each card though, as they should not have their own tab stops.
Instead, we could conceptualise each card as a row in a table, with each interactive element within it a cell. This would mean that users could navigate between each card using the up/down arrow keys, and left/right to move between elements within each card. "Horizontal" navigation could either loop within each card, or jump to the first/last interactive element of the next/previous card.
Alternatively, each navigable element could be a cell within a larger grid, with the card wrappers entirely presentational from a navigation perspective:
Without some experimentation, it is hard to say which of these flows would feel more natural. The third option, of breaking down the entire layout into a sub-grid, is probably the most intuitive, particularly if we appropriately mark each card as a group, and implement access keys such as Home, End, Page Up and Page Down to navigate within and between cards.
Footnotes
W3 Grid Pattern: Layout Grids ↩
The text was updated successfully, but these errors were encountered: