htmlaccessibilityaria-role

Why do some sites use role="grid" for things that look like a list?


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.


Solution

  • 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.