WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: accessible table sorting


From: Tim Harshbarger
Date: Apr 22, 2009 6:40AM

This is just a suggestion. I haven't tried testing it, so you may need
to test the following suggestion to ensure it works properly. I think
it will work, but I may also be overlooking something.

Given the constraint that you can only use background images, one
approach may be to have a link that contains text. You would then place
the background image on the link and wrap the text in a span so you
could use CSS to move it off the screen.

Don't use "display: none" or "visibility: hidden" because screen readers
assume they are not suppose to read text that is hidden like this.
Instead, you will want to use absolute positioning to move the element
off the screen.

Basically, you will be trying to recreate the effects you would get from
an image link with an alt attribute without using a foreground image or
an alt attribute. You want to keep the link to ensure the sorting
control is still keyboard focusable.

Of course, for the record, I will state it would just be a lot easier to
use an image link with the appropriate alt attribute and just preload
and cache the images.

-----Original Message-----
[mailto: <EMAIL REMOVED> ] On Behalf Of
Sent: Tuesday, April 21, 2009 4:53 PM
To: 'WebAIM List'
Subject: [WebAIM] accessible table sorting

OK, I've got a table of search results with a bunch of headers like
"category", "sub-category", etc. I want to allow users to click on an
arrow in the header to sort by whichever one they choose.

What is the best way to do this from an accessibility standpoint?