views:

50

answers:

1

What is preferred method to link PDF(with icon) on a page in terms of semantic, accessibility, usability and SEO?

for example

  • this is a name of PDF "01ccc5.pdf" but inside PDF this is the title of PDF "How to search in long PDF" Should i use PDF subject as a file name like "How-to-search-in-long-PDF?
  • and I want to show link of PDF as a PDF icon on the page, What is the best way in terms of accessibility and usability.
  • Should i insert pdf icon as a inside or i should use as a css background?

Which method is better? this

a{text-indent:-99999px}

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF 
<img src=pdf-icon.jpg" alt="How to search in long PDF" />
</a> 

or this

  a{text-indent:-99999px;background:url(pdf-icon.jpg);width:32px:height:32px}

or this method http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html

<a href="How-to-search-in-long-pdf.pdf" title="PDF, 25KB, Opens in a new window">
How to search in long PDF </a> 

I have to link multiple PDF


Note:

Title of PDF is also will be available before PDF but without any link

like this:

Title                                      PDF

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)

How to search in long PDF                  PDF icon (with link of PDF)
A: 

The last one is the best since everything is in the CSS. However, it doesn't work in IE6- and as much as we would all like this browser to die, it is still well used.

So, I'd use the second one, with a special class (e.g. a.pdf). And if you have multiple links with different file types, use sprites.

Edit: I've just understood why you used a negative text-indent. I'm not sure it will work properly with a background. In that case, I'd probably use an img with an alt text and no text content for the a. I nearly always favor using a text and an image, especially for download links.

Xr
although for IE6 we can use javascript to get work that selector
metal-gear-solid