Empty table header (File list)

[adam3smith]

Testing with WAVE.

The file list has an empty table header (where the checkbox is), i.e.

  <span class="ui-column-title"></span>
  <div class="ui-chkbox ui-chkbox-all ui-widget">
    <div id="datasetForm:tabView:filesTable_head_checkbox" role="checkbox" tabindex="0" aria-label="Select All" aria-checked="false" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
      <span class="ui-chkbox-icon ui-icon ui-icon-blank ui-c"></span>
    </div>
  </div>
</th>

It's probably fixable in automated tests by making this a <td> but that's just fooling the auto-test. I'm not sure whether the whole thing should even be a table rather than a list?

[adam3smith]

I'll reach out to some folks on guidance here

[qqmyers]

Hmm - I used to see this but with Chrome/Windows using Wave 3.2.3 I'm not seeing this error - this is in the file table on the dataset page, view mode?

[adam3smith]

Odd I'm not seeing it in Chrome/Edge, either, but I see it in Firefox and I think it's correct -- it is a table header with no text and I don't think the ARIA labels can substitute for having actual text

[adam3smith]

OK, here's the response from an accessibilty specialist over at code4lib:

Sebastian

Hi -- I'm trying to get the display of a file list/table right for accessibility in a data repository, see e.g. the File tab here. This is basically a table with one row per file and three cells per row -- a select checkbox, a File name & link, and a download/view option. Currently we have a table header at the top that has a check all box on the left, "1 to k of n files" in the middle, and a download/request button for all selected files on the right. That doesn't seem right to me. I'm struggling to think about this even in conceptual terms: Should we treat this as a data table and get the header right (if so, any thoughts on how?) -- my thinking here is that a screenreader announcing something like "Table with 3 columns and 8 rows..." is actually useful information -- or is this more helpful as a layout table, i.e, we'd take out the table header entirely as per the WebAIM guidance for layout tables.

metageeky (Kate)

Hey Sebastian, we interacted a little when I was at Syracuse. The problem here is that if you turn it into a layout table, you introduce some navigation confusion. First, you lose what you noted about being aware of how many items (files) and all that. Semantically, what you have is either a table or a list of items. Further complicating the situation is that the actual table headers do not really create a helpful experience. It's three columns only. There's a checkbox, various file names and details, and some file actions. Each row comes off as some text with actions and not really tabular data. I don't know Dataverse at all but if had my druthers, I'd propose the following: Revamp the table as a list Each list item is essentially a "card" such as Heydon Pickering talks about. You'd want to play with the DOM (element) ordering so that things like the file name comes first and not the check box. Makes scanning across the list items easier by front-loading that.

There is an another option, but it's a bit more drastic and involved. There is actual tabular data in that middle column: file name, file type, file size, thumbnail, publication date, # of downloads, etc. Since those appear to be found in all rows, you could make each a column with a relevant header. That would let a screen reader scan down by columns. You'd need to do a lot of CSS trickery to keep the layout as it is. Quite doable now that most browsers stopped letting CSS display override element role.

My current view is that the 2nd option is a bit too much, but as I say above, list would seem like a better way to organize this than table. I don't think we'll want to engage in that level of design work right now, though -- is there a way to bring this up in the context of the engoing SPA development?