Какой лучший способ связать PDF (с иконкой)?

Question

Какой предпочтительный способ связать PDF (со значком) на странице с точки зрения семантики, доступности, удобства использования и SEO?

например

• это название PDF "01ccc5.pdf" но внутри PDF это название PDF "Как искать в длинных PDF" Должен ли я использовать тему PDF в качестве файла название типа "Как искать в длинном PDF"?
• и я хочу показать ссылку PDF в виде Значок PDF на странице, что такое лучший способ с точки зрения доступности и удобство использования.
• Должен ли я вставить значок PDF в качестве внутри или я должен использовать как CSS фон

---

Какой метод лучше? это

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> 

---

или это

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

или этот метод 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> 

Мне нужно связать несколько PDF

---

Примечание:

Название PDF также будет доступно до PDF, но без ссылки

вот так:

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)

Answer 1

Простой способ принести PDF или другой значок с каждой ссылкой, используя CSS3:

1. иконка через фоновое изображение -> код CSS:

a[href$=".pdf"]
{
  background:url("your-pdf-image.png") no-repeat left;
  padding-left:25px;
}

2. принести значок из FontAwesome -> Код CSS:

a[href$=".pdf"]:before
{
  content:"\f1c1  ";
  font-family: fontawesome;
}

Answer 2

Последний является лучшим, так как все в CSS. Тем не менее, он не работает в IE6 - и как бы нам ни хотелось, чтобы этот браузер умер, он все еще хорошо используется.

Итак, я бы использовал второй со специальным классом (например, a.pdf). И если у вас есть несколько ссылок с разными типами файлов, используйте sprites .

Редактировать: Я только что понял, почему вы использовали отрицательный текстовый отступ. Я не уверен, что он будет работать правильно с фоном. В этом случае я бы, вероятно, использовал img с текстом alt и без текстового содержимого для a. Я почти всегда предпочитаю использовать текст и изображение, особенно для ссылок на скачивание.