E-mail List Archives

Search E-mail List Archives for

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

From: Birkir R. Gunnarsson
Date: Sun, Feb 03 2013 3:59PM
Subject: Double links (image being a spearate link, then link to product)
No previous message | Next message →

Good morning/afternoon/evening yea wise people.
I have been conducting extensive testing of multiple websites for the
Icelandic Web Association awards. It's been a very interesting
experience, where one starts seeing emerging patterns, to which one
needs to find solutions.
I have one or two separate ones, but will perhaps post them later.
The one I am refering to is extremely common in online stores.
First we have a link to an image of the product (I guess it's a
clickable image), no alt text, no text inside the anchor tag usually,
screen reader reads the name of the graphics file, usually with the
words "graphic link", at least Jaws does.
Right after the link (in html source order) is the "link proper" to
the product/product description. That link is fully accessible, has
proper text inside etc.

I've seen this at
http://www.buy.com and www.newegg.com
I came across this pattern on the Icelandic website
http://www.eirberg.is (all in Icelandic, but you easily see the
pattern without understanding the text).
I am wondering what to advise the website developers/designers in this regard.
Is there any benefit from having a separate link to the image, rather
than putting the image with the src attribute, inside the anchor tag
for the product, thus using a single link.
From screen reading point of view that would make the ost sense.
If we keep a separate image-only link, should it be hidden with
aria-hidden, should it have proper alt text, in which case users get
the same link essentially twice for every product listed on the page,
or is there another solution that would work?
Any ideas/suggestions always more than welcome.
-B

From: Ramya Sethuraman
Date: Mon, Feb 04 2013 9:30AM
Subject: Re: Double links (image being a spearate link, then link to product)
← Previous message | Next message →

Not sure if this is the right approach but what if you remove the linked
image from tab order (tabindex -1) and set aria-hidden true on it? Seems
like the linked image is just for the visual experience. A keyboard only
user or a jaws user would get the exact same information from the real link
below the image. Thoughts?


On Sun, Feb 3, 2013 at 5:59 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> Good morning/afternoon/evening yea wise people.
> I have been conducting extensive testing of multiple websites for the
> Icelandic Web Association awards. It's been a very interesting
> experience, where one starts seeing emerging patterns, to which one
> needs to find solutions.
> I have one or two separate ones, but will perhaps post them later.
> The one I am refering to is extremely common in online stores.
> First we have a link to an image of the product (I guess it's a
> clickable image), no alt text, no text inside the anchor tag usually,
> screen reader reads the name of the graphics file, usually with the
> words "graphic link", at least Jaws does.
> Right after the link (in html source order) is the "link proper" to
> the product/product description. That link is fully accessible, has
> proper text inside etc.
>
> I've seen this at
> http://www.buy.com and www.newegg.com
> I came across this pattern on the Icelandic website
> http://www.eirberg.is (all in Icelandic, but you easily see the
> pattern without understanding the text).
> I am wondering what to advise the website developers/designers in this
> regard.
> Is there any benefit from having a separate link to the image, rather
> than putting the image with the src attribute, inside the anchor tag
> for the product, thus using a single link.
> From screen reading point of view that would make the ost sense.
> If we keep a separate image-only link, should it be hidden with
> aria-hidden, should it have proper alt text, in which case users get
> the same link essentially twice for every product listed on the page,
> or is there another solution that would work?
> Any ideas/suggestions always more than welcome.
> -B
> > > >



--
*I also exist @: http://www.ramyasethuraman.com*

From: Birkir R. Gunnarsson
Date: Mon, Feb 04 2013 9:57AM
Subject: Re: Double links (image being a spearate link, then link to product)
← Previous message | Next message →

This is precisely what I was thinking would make sense, however I
would be very interest to hear everyone's opinions on this.
Thanks
-Birkir


On 2/4/13, Ramya Sethuraman < = EMAIL ADDRESS REMOVED = > wrote:
> Not sure if this is the right approach but what if you remove the linked
> image from tab order (tabindex -1) and set aria-hidden true on it? Seems
> like the linked image is just for the visual experience. A keyboard only
> user or a jaws user would get the exact same information from the real link
> below the image. Thoughts?
>
>
> On Sun, Feb 3, 2013 at 5:59 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Good morning/afternoon/evening yea wise people.
>> I have been conducting extensive testing of multiple websites for the
>> Icelandic Web Association awards. It's been a very interesting
>> experience, where one starts seeing emerging patterns, to which one
>> needs to find solutions.
>> I have one or two separate ones, but will perhaps post them later.
>> The one I am refering to is extremely common in online stores.
>> First we have a link to an image of the product (I guess it's a
>> clickable image), no alt text, no text inside the anchor tag usually,
>> screen reader reads the name of the graphics file, usually with the
>> words "graphic link", at least Jaws does.
>> Right after the link (in html source order) is the "link proper" to
>> the product/product description. That link is fully accessible, has
>> proper text inside etc.
>>
>> I've seen this at
>> http://www.buy.com and www.newegg.com
>> I came across this pattern on the Icelandic website
>> http://www.eirberg.is (all in Icelandic, but you easily see the
>> pattern without understanding the text).
>> I am wondering what to advise the website developers/designers in this
>> regard.
>> Is there any benefit from having a separate link to the image, rather
>> than putting the image with the src attribute, inside the anchor tag
>> for the product, thus using a single link.
>> From screen reading point of view that would make the ost sense.
>> If we keep a separate image-only link, should it be hidden with
>> aria-hidden, should it have proper alt text, in which case users get
>> the same link essentially twice for every product listed on the page,
>> or is there another solution that would work?
>> Any ideas/suggestions always more than welcome.
>> -B
>> >> >> >>
>
>
>
> --
> *I also exist @: http://www.ramyasethuraman.com*
> > > >

From: deborah.kaplan
Date: Mon, Feb 04 2013 10:07AM
Subject: Re: Double links (image being a spearate link, then link to product)
← Previous message | Next message →

Ramya Sethuraman wrote:

> A keyboard only user or a jaws user would get the exact same information from the real link below the image. Thoughts?

As a sighted keyboard user, I expect images to be links just
because they always are. If they aren't in the tab index it won't
bother me too much, because I'll just tab to the the next link
and be all set. But it would certainly startle me, and possibly a
more visually-oriented keyboard user than me would be confused.

But I suspect the confusion to a keyboard user is probably less
troublesome than the alternate situation is to a screenreader
user, so maybe it's a net win.

-Deborah
--
Deborah Kaplan
Accessibility Team Co-Lead
Dreamwidth Studios LLC

From: Patrick H. Lauke
Date: Mon, Feb 04 2013 10:44AM
Subject: Re: Double links (image being a spearate link, then link to product)
← Previous message | No next message

On 03/02/2013 22:59, Birkir R. Gunnarsson wrote:
> I am wondering what to advise the website developers/designers in this regard.

I'd say it depends on how easy/difficult it would be to change whatever
backend CMS system is generating those pages. From a markup point of
view, the simplest solution would indeed be to just wrap both the image
and the text into a single link (and keep the empty ALT), possibly
wrapping the text in a span (or even a paragraph, as it's kosher, at
least in HTML5, to wrap even block-level elements in a link) just to
make sure the styling is equivalent. If, however, the system is so
inflexible that this isn't possible, things like tabindex etc may need
to be injected.

P
--
Patrick H. Lauke