E-mail List Archives
Thread: Duplicate linkage
Number of posts in this thread: 12 (In chronological order)
From: Steven Henderson
Date: Tue, Sep 01 2009 8:35AM
Subject: Duplicate linkage
No previous message | Next message →
I am keen to hear people's views on the following image linkage scenario:
"A HTML page lists numerous works or products by name linked to a
corresponding page. Each list item also needs an accompanying image to link
to the same page."
Why do so many websites still place an additional link underneath the
heading link for the image, linking to the same page as the heading link?
What justifies a duplicate link in such close succession? Is there really a
disadvantage to placing the image inside the h2 tag, thus sharing the same a
tag?
<h2><a href="http://www.website.com/products/blue.html">Best blue
product</a><a href="http://www.website.com/products/blue.html"><img
src="products/blue.jpg" alt="best blue product" /></a></h2>
Or
<h2><a href="http://www.website.com/blue.html">Best blue product <img
src="products/blue.jpg" alt="" /></a></h2>
Regards,
Steven
From: Jared Smith
Date: Tue, Sep 01 2009 8:50AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
On Tue, Sep 1, 2009 at 8:33 AM, Steven Henderson wrote:
> Why do so many websites still place an additional link underneath the
> heading link for the image, linking to the same page as the heading link?
Either ignorance or they're using a content management system that
doesn't know better. And most often, the image does not have
alternative text, resulting in an empty link. When a screen reader
encounters a link that contains only an image that does not have
alternative text, it will read the URL of the link and/or the image
file name, which may or (most often) may not be useful.
> Is there really a
> disadvantage to placing the image inside the h2 tag, thus sharing the same a
> tag?
No. But often these sites are using tables or other complexities to
control layout making it difficult for them to place both the text
'caption' and the image within the same link. This is easily resolved
through some very basic CSS.
> <h2><a href="http://www.website.com/blue.html">Best blue product <img
> src="products/blue.jpg" alt="" /></a></h2>
Yep, this is the best way to code it to avoid any redundancy or empty
links. This assumes that the product really should be within an <h2>
in this context (most product listing probably wouldn't justify
headings for every single product).
Jared Smith
WebAIM
From: Simius Puer
Date: Tue, Sep 01 2009 8:55AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
Hi Steven
Where sites are managed manually it is usually just down to lazy coding.
It's easier to write the CSS for a separate image and text link...easy but
lazy, unprofessional and not very accessible.
Most bigger sites where you see this it's the result of some default CMS
output. Many of these have built in publishing modules that output the code
badly (again, usually because the people writing the CSS, aka "themes", are
too lazy to put the effort in). They can be changed in most cases but
that's down to the skill and attention to detail of the people configuring
the CMS.
Having links inside heading is also not usually a great idea.
overall, it's not good practice from any angle.
...Now, just wait for some bright spark to say "well, everyone else is doing
it" ;)
From: Steven Henderson
Date: Tue, Sep 01 2009 9:10AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
I was wondering the same thing myself, Simius.
And like Jared, I like to avoid redundant code as much as possible, but find
it all too easy to then consider merging elements such as a heading and a
link. God, I hate these modern day semantic bottlenecks and there bloated
workarounds.
With your feedback, I am thinking for the purposes of a dozen portfolio
items, that a list of linked images would work best with a simple span
instead of a heading. Your thoughts? Do I lose anything in ditching
headings?
Steven
From: Geof Collis
Date: Tue, Sep 01 2009 9:15AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
>Hi Steve
>
>Personally I dont like Headings being links, JAWS is already
>defining it as a heading and then as a link and I dont always catch
>it as it is too verbose. I end up backtracking to find a
>corresponding link, realizing it is the Heading itself that is the link.
>
>cheers
>
>Geof
Editor
Accessibility News
www.accessibilitynews.ca
Accessibility News International
www.accessibilitynewsinternational.com
From: Jared Smith
Date: Tue, Sep 01 2009 9:20AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
On Tue, Sep 1, 2009 at 9:10 AM, Steven
Henderson< = EMAIL ADDRESS REMOVED = > wrote:
> With your feedback, I am thinking for the purposes of a dozen portfolio
> items, that a list of linked images would work best with a simple span
> instead of a heading. Your thoughts? Do I lose anything in ditching
> headings?
It all depends on whether the images are actually headings or not. It
is relatively rare for a link to be the only thing within a heading.
If it's a link to somewhere else, it's likely not a heading for
content that follows, right?
If you have a dozen portfolio items, unless there is content
underneath each item, it's unlikely that a heading is appropriate. A
<div> would probably be more appropriate than a <span>, because a
<div> is a block-level element that would be used to offset each
portfolio item.
I'd also point out that you used the word "list" in your description.
Perhaps it should be a list?
Jared
From: Steven Henderson
Date: Tue, Sep 01 2009 9:25AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
I'm thinking of a list, Jared, yes. Something like this:
<li><a href="http://www.website.com/blue.html"><span>Best blue
product</span> <img src="products/blue.jpg" alt="" /></a></li>
I'd like to use a block level tag instead of the span, but to place the
image and a text title within the a tag, I need to use an inline tag.
Thoughts!?
Steven
From: Steven Henderson
Date: Tue, Sep 01 2009 9:30AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
Oh, and because I plan to place the titles in the span adjacent to the
image, I want to avoid using a value for the image alt. Anybody have reasons
against this?
Steven
From: Steven Henderson
Date: Tue, Sep 01 2009 9:35AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
I am totally appreciating the problems of linking headings, Geof.
Consider me in agreement on being against this practice from here on.
Steven
From: Shawn Lawler
Date: Tue, Sep 01 2009 9:45AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
Steven Henderson wrote:
> I'm thinking of a list, Jared, yes. Something like this:
>
> <li><a href="http://www.website.com/blue.html"><span>Best blue
> product</span> <img src="products/blue.jpg" alt="" /></a></li>
>
> I'd like to use a block level tag instead of the span, but to place the
> image and a text title within the a tag, I need to use an inline tag.
>
A simple CSS rule could give your span, block level behavior.
.myPortfolioItems li span {display:block;}
From: Steven Henderson
Date: Tue, Sep 01 2009 10:05AM
Subject: Re: Duplicate linkage
← Previous message | Next message →
I was already on that road, thanks Shawn.
What I have now moved onto, is ditching the inline image altogether and
replacing that with a css background. Ultimately, this is because with a
text link I feel screen readers don't need to know there is an image there
and I will use css to format the design for visual users. Plus, I can
re-cycle the css for using the images on other pages using less overall
markup. I believe everyone will be happy.
Steven
From: Geof Collis
Date: Tue, Sep 01 2009 10:15AM
Subject: Re: Duplicate linkage
← Previous message | No next message
>Hi Steven
>
>Excellent!! Nothing more annoying than listening to useless chatter
>in irrelevant images. Having to listen to descriptions of images on
>a site that dont serve any purpose, coupled with other bad markup is
>like driving on a freeway during rush hour, just slows things down
>and causes "code rage". ;O)
>
>cheers
>
>Geof
Editor
Accessibility News
www.accessibilitynews.ca
Accessibility News International
www.accessibilitynewsinternational.com