0

I've specifically been looking into howw chat applications make their list of conversations accessible, and both WhatsApp and Facebook Messenger on the web use role="grid", where I'd expect that role="list" might be more appropriate because it's a list of conversations. I'd expect that this practice is based on how screen readers treat thedse roles, but I'm not completely sure.

davidroseboom
  • 187
  • 10
bigblind
  • 12,539
  • 14
  • 68
  • 123
  • You'd have to ask them; we can't answer for them. However, the grid role is just for "multiple rows", not necessarily "for grids". That might be why – TylerH Sep 01 '21 at 21:10
  • "The grid role is for a widget that contains one or more rows of cells. The position of each cell is significant and can be focused using keyboard input." - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role – Nathaniel Flick Sep 02 '21 at 02:17

1 Answers1

2

I suspect it's because each item in the list includes more than one bit of data.

The grid role is for a widget that contains one or more rows of cells.

So if each conversation has participants and/or other structured metadata, then the conversation is the "row"; and "participants", "last message time", "unread count", etc. are the cells.

ray
  • 26,557
  • 5
  • 28
  • 27
  • It's wrong to use `role="grid"` on tables that don't have editable cells. Think of a grid like a spreadsheet where you can edit the contents of the cells. If the cells can't be edited, then a regular table should be used, not grid. However, I'm guessing the reason they use grid is because that role automatically changes the screen reader from browse mode to forms mode and when in forms mode, all keyboard events are sent to the element rather than being interpreted by the screen reader. This means a down arrow can scroll the content (handled by element) rather than read the next DOM element. – slugolicious Sep 05 '21 at 23:22