Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74846

Accessibility Methodology for non-standard Table data

$
0
0

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:

  1. 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...
  2. 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.


Viewing all articles
Browse latest Browse all 74846

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>