Quiz 1.1.3: Adjacent duplicate links
Our friend Tom is back. He is asking about the best way to lay out links which have image and text links side by side, both pointing to the same destination. Tom used to put these in tables, but now wants to avoid using a table for layout. We can help him avoid the table. We can also help his visitors avoid hearing redundant information.
Try out a testcase for these three methods.
Q. How should we lay out image and text links side by side?
- A Place both the image link and the text link side by side in HTML. Use ALT=”" on the image.
- B Place image and text together inside one HTML link. Use ALT=”" on the image.
- C Use only the text link in the HTML. Display the image as a CSS background image.
- D Describe another method…
May 1st, 2005 at 7:27 am
I tend to lean towards C for things like this. The image is purely presentational and doesn’t need to communicate a message at all, because of the existing text link. This way you are preventing redundant information while keeping the message short and clear.
I am still not 100% sure about this though, but right now that’s where I am standing.
May 1st, 2005 at 9:30 am
For me this really depends on the exact situation. I have one recent example where I had a linked image with text. I made the alt text read exactly the same as the image text and incorporated everything together. I tested it and was delighted with the results, sighted or not, it read exactly the same way.
Otherwise I tend to mirror in text the link before or after the image, but I try to do so in a natural way.
Example:
Browsing slow & unsafe? Try Firefox and rediscover the web.
My fear is that things can get redundant fast. The example above is pushing it due to the tool tip in the first link and the alt text in the second link. Perhaps since it’s mirrored the best thing to do would be to nullify both. Like so.
Browsing slow & unsafe? Get Firefox and rediscover the web.
May 1st, 2005 at 9:34 am
Hmm. Sorry. My reply above would make more sense if the Firefox icon images were posted but they didn’t show up.
Answer D, anyway.
May 1st, 2005 at 11:50 am
C, as the image is pure visual fluff. if for whatever reason it wasn’t possible to use CSS, B.
May 1st, 2005 at 1:22 pm
No doubt it should be C.
May 1st, 2005 at 1:45 pm
B and C are equally accessible. B is a little easier to create I guess, but C is better from a markup point of view and probably from all other points of view too.
May 1st, 2005 at 2:38 pm
Definitely C.
It makes for easier management down the road and also allows you more flexibility with smaller style rules and markup when using :hover, :visited, etc.
May 2nd, 2005 at 3:47 am
C in case the image is purely ornamental (like icons). B if the image is part of the content (product-image + product-name link to product specific page).
May 2nd, 2005 at 4:16 am
C would be my answer in this case (image is purely visual in this case). If the image conveys info, then method B is the one I would use).
May 2nd, 2005 at 5:42 pm
If the image is purely presentational (conveys no additional information), method C should be used; however, in the case that the image conveys additional information, I’d have to go with method B.
May 2nd, 2005 at 10:28 pm
C, personally; B if printing that icon were important.
May 7th, 2005 at 6:08 pm
Dimitri Glazkov writes in “Graphics and Structural Markup: Keeping ‘pretties’ out of content” good Rules of Thumb for determining whether an image is content or presentational. The image in this example is purely presentational and not crucial to the content. It’s not even important to print. Therefore, I’m voting C.
May 9th, 2005 at 5:26 am
IBM Home Page reader 3.04, in item reading mode, speaks all three examples exactly the same way, as a simple link “slide show.”
May 9th, 2005 at 6:38 am
Jaws 6.01 with IE 6
For example A says “link graphic link slide show”
For examples B and C says “link slide show”