Question

在语义，可访问性，可用性和SEO方面，在页面上链接PDF（带图标）的首选方法是什么？

例如

这是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

使用CSS3为每个链接带来pdf或其他图标的简便方法：

<强> 1。图标通过背景图片 - ＆gt; CSS代码：

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

<强> 2。从FontAwesome带来图标 - ＆gt; CSS代码：

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

Answer 2

最后一个是最好的，因为一切都在CSS中。但是，它在IE6中不起作用，并且尽管我们都希望这个浏览器死掉，但它仍然使用得很好。

所以，我会使用第二个，使用特殊类（例如a.pdf）。如果您有多个具有不同文件类型的链接，请使用sprites。

编辑：我刚才明白为什么你使用了负文本缩进。我不确定它是否能在背景下正常工作。在这种情况下，我可能会使用带有img文字的alt而a没有文字内容。我几乎总是喜欢使用文本和图像，尤其是下载链接。

链接PDF（带图标）的最佳方法是什么？

2 个答案:

使用CSS3为每个链接带来pdf或其他图标的简便方法：