Git Product home page Git Product logo

Comments (4)

adam3smith avatar adam3smith commented on August 16, 2024

I'll reach out to some folks on guidance here

from dataverse.

qqmyers avatar qqmyers commented on August 16, 2024

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?

from dataverse.

adam3smith avatar adam3smith commented on August 16, 2024

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

from dataverse.

adam3smith avatar adam3smith commented on August 16, 2024

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?

from dataverse.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.