WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reorder table columns

for

From: Birkir R. Gunnarsson
Date: Feb 10, 2015 8:00AM

Hi

You could have a "move left" and "move right" buttons for each of the
column headers in the table. When activated these would move the
columns left or right in the table structure. (these should be in the
th cell containing the column header for the table).

You can use the table summary attribute (which is invisible) to
explain this to screen reader users, something along the lines of
"Each column header has two buttons which, when activated, move that
column to the left or right in the table."
Make sure to put aria-disabled="true" on buttons that are inoperable,
such as the "move right" button when column is the rightmost column in
the table or "move left" for leftmost column.

You could also implement a drag n drop type functionality e.g. using a
dropdown containing all the column names, where users can grab an item
(column) using the spacebar and then drop it elsewhere within the list
using the spacebar again. That dropdown would then control the display
of the associated table.
This can be done, it is more coding, but makes for a nicer table
(withouta additional controls).
Cheers





On 2/10/15, Michael Vogt < <EMAIL REMOVED> > wrote:
> Hello.
>
> I was asked what would be a sensible way to provide reordering of
> columns in an accessible way. Couldn't find anything helpful
> elsewhere.
>
> Is this even possible?
>
>
> Thanks,
> Michael
> > > >


--
Work hard. Have fun. Make history.