0

We are using the DEVEXPRESS tools on a project that needs to be A and AA - ADA compliant. This tool has a functionality used to hide columns of the table when there is not enough space to display them properly.

Looks like the table below, on the right side the columns are hidden. When you click the dots, the values are displayed. enter image description here

The columns are hidden only on smaller resolutions, on 1920x1080 all columns are displayed.

My question is: is this ADA compliant? I am asking this from the consistency perspective since on bigger resolutions we have some data displayed on page while on lower resolutions some data is hidden.

Thanks.

Jake Manet
  • 1,174
  • 3
  • 15
  • 26

1 Answers1

0

If you code it properly, yes it could be WCAG conformant.

It's a little tricky because if the hidden columns are truly hidden, then a screen reader won't know there are extra columns. When they navigate to the table, they'll hear "table with 5 columns and X rows" but the table might really have 20 columns. So you might need some invisible text just for the screen reader that tells the user that there are really more columns than currently displayed. Perhaps use the <caption> element with a class of "sr-only".

<table>
  <caption class="sr-only">This table has X columns but Y of them are hidden.  Select the "Show more columns" button to unhide the columns</caption>

The "sr-only" class is not a specially defined class but it's a common name to use for a class that creates text that is visibly hidden but still available to screen readers. See What is sr-only in Bootstrap 3?. You can call the class whatever you want.

The '...' buttons would need to have an appropriate screen reader label (accessible name). Visually, you can show '...' but it'll need something more descriptive for the screen reader user.

<button aria-label="Show more columns">...</button>

Does the '...' button unhide all the hidden columns or just some of them? If only some of them, then the user has to click on '...' again to unhide some more? If so, then the label for '...' would have to indicate that.

When the columns are unhidden, that makes the table very wide so you'll have a horizontal scrollbar on the table?

slugolicious
  • 15,824
  • 2
  • 29
  • 43