Issue Description:
I am developing the UI for a list of advisor meetings. The list is formatted like a table, with a row of column headers and corresponding data. Each meeting contains a row of data as well as a description section below that row. Each meeting card is also expandable to show additional data. I am unsure of the best aria method to make this markup more accessible.
Screenshot of the UI I'm developing (actually a gif that shows the expand functionality)
Goal:
To make it easier for screen readers to easily navigate the list of meetings
Potential Solutions:
- Use aria attributes to construct a table for the elements that are in a table format (https://www.w3.org/TR/wai-aria-practices-1.1/examples/table/table.html) I'm not sure how navigable this would be, especially when it comes to navigating to the description section or the collapsible details section...
- Hide the table header from screen readers and make the meeting wrappers li elements so that it forms a list. I would add hidden screen reader labels to each of the unlabeled values. My concern is that the entire meeting is too much content for a li element and I'm not sure what the navigability for screen readers would be like.
I am certainly not an accessibility expert so I'm hoping that someone with more experience than me can point me towards the best practice / best implementation for a case like this. Any suggestions would be much appreciated.