E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 12 (In chronological order)

From: Randi
Date: Tue, Apr 21 2009 4:00PM
Subject: Re: accessible table sorting
No previous message | Next message →

Would a drop down menu work? I love drop down menus for things like
this. I'm no techie though, so I might be off track.

On 4/21/09, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> 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?
>
>

From: Dean Hamack
Date: Tue, Apr 21 2009 4:05PM
Subject: accessible table sorting
← Previous message | Next message →

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?

From: Dean Hamack
Date: Tue, Apr 21 2009 4:10PM
Subject: Re: accessible table sorting
← Previous message | Next message →

It would work, but not very well because there are so many columns in
this case. So you would have to have a ton of entries like "sort by
category ascending", "sort by category descending", etc. It also doesn't
fit into the design specs I need to follow.

I need a simple arrow in each column that when clicked sorts by that
heading in an ascending order, and when clicked again sorts in a
descending order. It's a vary common format, I'm just trying to figure
out how to make it the most obvious for someone who can't see the
arrows.

> -------- Original Message --------
> Subject: Re: [WebAIM] accessible table sorting
> From: Randi < = EMAIL ADDRESS REMOVED = >
> Date: Tue, April 21, 2009 2:58 pm
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> Would a drop down menu work? I love drop down menus for things like
> this. I'm no techie though, so I might be off track.

From: Randi
Date: Tue, Apr 21 2009 4:40PM
Subject: Re: accessible table sorting
← Previous message | Next message →

I see. So its on a results page, and you want to give the option of
clicking the arrow to sort by ascending or descending. So for someone
who is sighted, thiswould be obvious? Is it kind of like expanding a
menu by clicking the plus or negative sign? If I'm following, could
you include some hidden text explaining what the arrow would do? And
then work your magic on the arrow? The reader would say, click on
arrow to sort in ascending order, and then it would say arrow.

I've run into arrows that are supposed to do stuff, and then they
don't do anything. So I might be off base. Or if they do something, it
doesn't say anything. Thats why I love drop down menus.

On 4/21/09, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> It would work, but not very well because there are so many columns in
> this case. So you would have to have a ton of entries like "sort by
> category ascending", "sort by category descending", etc. It also doesn't
> fit into the design specs I need to follow.
>
> I need a simple arrow in each column that when clicked sorts by that
> heading in an ascending order, and when clicked again sorts in a
> descending order. It's a vary common format, I'm just trying to figure
> out how to make it the most obvious for someone who can't see the
> arrows.
>
>> -------- Original Message --------
>> Subject: Re: [WebAIM] accessible table sorting
>> From: Randi < = EMAIL ADDRESS REMOVED = >
>> Date: Tue, April 21, 2009 2:58 pm
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>
>>
>> Would a drop down menu work? I love drop down menus for things like
>> this. I'm no techie though, so I might be off track.
>
>
>

From: Karl Groves
Date: Tue, Apr 21 2009 4:55PM
Subject: Re: accessible table sorting
← Previous message | Next message →

> Using hardcoded images for the arrows with alt text is not an option
> because the arrow image needs to change when clicked. That's easy to do
> with a css background image, but not one that is hardcoded in.

Not sure I follow here. Surely if you can change the image when it is
clicked, you can change the text alternative of it.



Karl





>
>
>
> > -------- Original Message --------
> > Subject: Re: [WebAIM] accessible table sorting
> > From: Randi < = EMAIL ADDRESS REMOVED = >
> > Date: Tue, April 21, 2009 3:37 pm
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >
> >
> > I see. So its on a results page, and you want to give the option of
> > clicking the arrow to sort by ascending or descending. So for someone
> > who is sighted, thiswould be obvious? Is it kind of like expanding a
> > menu by clicking the plus or negative sign? If I'm following, could
> > you include some hidden text explaining what the arrow would do? And
> > then work your magic on the arrow? The reader would say, click on
> > arrow to sort in ascending order, and then it would say arrow.
> >
> > I've run into arrows that are supposed to do stuff, and then they
> > don't do anything. So I might be off base. Or if they do something,
> it
> > doesn't say anything. Thats why I love drop down menus.
>
>
>

From: Dean Hamack
Date: Tue, Apr 21 2009 5:00PM
Subject: Re: accessible table sorting
← Previous message | Next message →

Yes, you are correct on all counts.

My first inclination is to just make the header text a link with a title
that says "sort". But a couple people pointed out that title text isn't
usually read by default.

Using hardcoded images for the arrows with alt text is not an option
because the arrow image needs to change when clicked. That's easy to do
with a css background image, but not one that is hardcoded in.



> -------- Original Message --------
> Subject: Re: [WebAIM] accessible table sorting
> From: Randi < = EMAIL ADDRESS REMOVED = >
> Date: Tue, April 21, 2009 3:37 pm
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>
>
> I see. So its on a results page, and you want to give the option of
> clicking the arrow to sort by ascending or descending. So for someone
> who is sighted, thiswould be obvious? Is it kind of like expanding a
> menu by clicking the plus or negative sign? If I'm following, could
> you include some hidden text explaining what the arrow would do? And
> then work your magic on the arrow? The reader would say, click on
> arrow to sort in ascending order, and then it would say arrow.
>
> I've run into arrows that are supposed to do stuff, and then they
> don't do anything. So I might be off base. Or if they do something, it
> doesn't say anything. Thats why I love drop down menus.

From: Dean Hamack
Date: Tue, Apr 21 2009 5:10PM
Subject: Re: accessible table sorting
← Previous message | Next message →

I'm not changing the image. That would be slow, clunky, and likely cause
browser issues. I'm simply changing the class of a link on click, and
thereby changing it's background image from an up arrow to a down arrow
(or vice versa).


> -------- Original Message --------
> Subject: Re: [WebAIM] accessible table sorting
> From: "Karl Groves" < = EMAIL ADDRESS REMOVED = >
> Date: Tue, April 21, 2009 3:55 pm
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>
>
> Not sure I follow here. Surely if you can change the image when it is
> clicked, you can change the text alternative of it.
>
>
>
> Karl
>
>
>
>
>
> >
> >
> >
> > > -------- Original Message --------
> > > Subject: Re: [WebAIM] accessible table sorting
> > > From: Randi < = EMAIL ADDRESS REMOVED = >
> > > Date: Tue, April 21, 2009 3:37 pm
> > > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > >
> > >
> > > I see. So its on a results page, and you want to give the option of
> > > clicking the arrow to sort by ascending or descending. So for someone
> > > who is sighted, thiswould be obvious? Is it kind of like expanding a
> > > menu by clicking the plus or negative sign? If I'm following, could
> > > you include some hidden text explaining what the arrow would do? And
> > > then work your magic on the arrow? The reader would say, click on
> > > arrow to sort in ascending order, and then it would say arrow.
> > >
> > > I've run into arrows that are supposed to do stuff, and then they
> > > don't do anything. So I might be off base. Or if they do something,
> > it
> > > doesn't say anything. Thats why I love drop down menus.
> >
> >
> >

From: Randi
Date: Tue, Apr 21 2009 5:20PM
Subject: Re: accessible table sorting
← Previous message | Next message →

So...can the text say "up arrow" or "down arrow" so that when its
clicked, the arrow moves for sighted people, and speaks for readers?
This is probably way complicated programming that sounds simpler then
it is lol.

On 4/21/09, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> I'm not changing the image. That would be slow, clunky, and likely cause
> browser issues. I'm simply changing the class of a link on click, and
> thereby changing it's background image from an up arrow to a down arrow
> (or vice versa).
>
>
>> -------- Original Message --------
>> Subject: Re: [WebAIM] accessible table sorting
>> From: "Karl Groves" < = EMAIL ADDRESS REMOVED = >
>> Date: Tue, April 21, 2009 3:55 pm
>> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>>
>>
>> Not sure I follow here. Surely if you can change the image when it is
>> clicked, you can change the text alternative of it.
>>
>>
>>
>> Karl
>>
>>
>>
>>
>>
>> >
>> >
>> >
>> > > -------- Original Message --------
>> > > Subject: Re: [WebAIM] accessible table sorting
>> > > From: Randi < = EMAIL ADDRESS REMOVED = >
>> > > Date: Tue, April 21, 2009 3:37 pm
>> > > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> > >
>> > >
>> > > I see. So its on a results page, and you want to give the option of
>> > > clicking the arrow to sort by ascending or descending. So for someone
>> > > who is sighted, thiswould be obvious? Is it kind of like expanding a
>> > > menu by clicking the plus or negative sign? If I'm following, could
>> > > you include some hidden text explaining what the arrow would do? And
>> > > then work your magic on the arrow? The reader would say, click on
>> > > arrow to sort in ascending order, and then it would say arrow.
>> > >
>> > > I've run into arrows that are supposed to do stuff, and then they
>> > > don't do anything. So I might be off base. Or if they do something,
>> > it
>> > > doesn't say anything. Thats why I love drop down menus.
>> >
>> >
>> >

From: ben morrison
Date: Tue, Apr 21 2009 5:25PM
Subject: Re: accessible table sorting
← Previous message | Next message →

On Wed, Apr 22, 2009 at 12:14 AM, Randi < = EMAIL ADDRESS REMOVED = > wrote:

> So...can the text say "up arrow" or "down arrow" so that when its
> clicked,


It would need to change as you described if it is based on Up Down toggling.

Descending Date

CLICK

Ascending Date

etc

As for the wording, thats a topic in itself :)

ben
--
Ben Morrison

From: ben morrison
Date: Tue, Apr 21 2009 5:55PM
Subject: Re: accessible table sorting
← Previous message | Next message →

On Tue, Apr 21, 2009 at 10:53 PM, < = EMAIL ADDRESS REMOVED = > wrote:

> 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?
>

User clicks sortable links - this link could be an image with ALT text or
use a image replacement technique - sighted users may benefit from text as
well....
1: Backend returns the page with the table sorted to that links criteria
1 b: JS could override/stop the page refresh and insert the updated
table instead - the logic is already defined in the backend it just returns
only the table - or in this case the TBODY as the THEAD may need to contain
the sorting LINKS......

Ben
--
Ben Morrison

From: Karl Groves
Date: Tue, Apr 21 2009 6:00PM
Subject: Re: accessible table sorting
← Previous message | Next message →

I don't think that using a background image for this is appropriate. You're
using a background image to convey information. That's not entirely a bad
thing, so long as you're providing a text alternative somehow - in either
case, if you can change a class dynamically, you can change the text
alternative dynamically as well.

Karl

>

From: Tim Harshbarger
Date: Wed, Apr 22 2009 6:40AM
Subject: Re: accessible table sorting
← Previous message | No next message

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.

Tim