4 replies [Last post]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

How to make a sortable table as accessible as it can be?

A typical sortable table uses the column headings as links to apply a sort order based on that column to all the rows in the table. When the table is sorted in order by a particular column, the link on that column now means reverse the order. Often this column will have some graphic indicator - to show that the table is sorted by this column and to show the order is ascending or descending.

So back to the original question, how to express all this information in an accessible manner?

- is it reasonable for the column headings to have multiple-meanings? I.e., would it be better to have a row of links under the column headings for sorting the table?
- is it confusing to have an indicator of current order on a link which means a different order?
- does having the table data spread over several pages have an impact. I.e., when there are pagination links is it clear that sorting the table not only affects the rows on view but the whole dataset?

Ideas welcome?

Tags:
ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 30 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

"So back to the original

"So back to the original question, how to express all this information in an accessible manner?"

A very simplistic (accessible) solution would be to remove the sorting interface from the table itself, separating functionality from information, and staying away from the "typical sortable table" described in the second paragraph.

I don't think it is reasonable for column headings to have multiple meanings (and multiple functions). From an accessibility point-of-view, that can be a nightmare, especially for the blind. You can just imagine how a screen reader will say something like:

The Column Title (Descending)

"Link. The column, sort ascending. The column title. Descending." Say what? Then on to the next column...same thing. And if it's a ten-column table?

Anyway, back to my simplistic solution:

i. A Form (for the sorting interface)
i.a. A select/options field for the column titles
i.b. A radio button for both ascending and descending order
i.c. A submit button

ii. The Table

Making the the form accessible is easy enough. And the user and/or user-agent can go about his/her/its business reading the information contained in the table.

Styling the form is easy enough as well. Styling for both aesthetic purposes and giving a sighted visitor an idea of what the interface is for.

But, that's just what I think. Smile
Cheers!

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Thanks for the reply ABCruz.

Thanks for the reply ABCruz. I'm not sure I favour a form. Sort order can be handled easily enough by links. I do agree that heading titles should be only titles and changing the order should be separated.

I did think this topic would inspire more replies. Sortable tables aren't that uncommon and they don't seem to have had much accessible love.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 30 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Yeah, I thought the form

Yeah, I thought the form might not be the right thing to use too. But I've seen that sort of thing before (I just forget where) and it seems to work alright.

I was hoping for more thoughts on this too. Maybe every one else is just busy. Smile

Arielle

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: I did think this

Quote:

I did think this topic would inspire more replies. Sortable tables aren't that uncommon and they don't seem to have had much accessible love.

I read this post originally Chris and too was surprised at lack of response, especially as I have been doing a lot with jQuery (but couldn't think of anything much to add) along the Dragable Dropable Sortable stable of effects, however I'm only so found of all this sort of stuff and as the amount of these 'effects' started to build up on a given page the less I found my interest held, I had a mini struggle to simply be allowed to describe fully attributed tables that were in themselves accessible as far as can be mustered when I had to allow for sortable columns I just went with links and title attributes swapped according to state of column and a little further explanatory plain text provided as help dialogue, I probably ought to think things through a little deeper yet such is the volume of work to get through....

I'll have a re-visit next week of the tables and think further although I hazard a guess that one is limited in what can be achieved; All ears(eyes) though if anyone has some further suggestions.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me