0

I am currently working on a digital form, and at one stage the user has to select one or more elements from a list of transactions. Each list element has multiple columns with different information.

To improve accessibility we want to add column headers to the list. What makes this a little bit awkward is that as a part of the list, we also have month subheaders that serve as separators (so the user can more easily scan/scroll to find what they are looking for.

How would you design/structure this? I find it awkward when the labels are placed above the month subheader, but not sure how to lay this up differently. Also, this way of structuring it might confuse screen readers? Not too familiar with designing this type of component for screen readers.

enter image description here

Improve this question

2 Answers 2

Reset to default
1

If that is the usual content of the table, there is enough space to add the month column:

enter image description here

Improve this answer
1
  • Good idea! The merchant names could be anything and usually isn't this short. While this is probably the most reasonable way of doing it, it is sacrificing a lot of space. I'm definitely trying some variants of this, but also we need to weigh the value of the space against the value of the month itself. Thanks!
    – mxds
    Commented May 28, 2023 at 21:43
0

What you are proposing is not wrong, just add a checkbox to the month row to select all underneath and a number of contained items/rows. Treat the month also as row, but more like parent type of row. I am not sure about accessibility implications, but here some real world examples:

Use grouping, like rows nested under the grouping row (check AG Grid)?

enter image description here

Monday.com is nesting column headers too, even if they are the same for parent table, creates a bit much more visual noise, but the concept is same.

enter image description here

Treat months in their dedicated column and span it over related rows (in the below example, substitute Account name with month). Goldman Sachs design system.

enter image description here

Improve this answer
1
  • I appreciate the examples! I realize I did not explain the user's situation when selecting these rows. This is a form for disputing fraudulent or similar transactions, so grouping transactions doesn't make sense (to me) for this scenario. Your last example is therefore the most relevant, but the idea was that with the separator subheaders, it would make the list easier to scan, but might just scrap the whole thing and just stick with the dates. Thanks anyways!
    – mxds
    Commented May 28, 2023 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.