WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best Practice for linking to documents

for

From: John Foliot
Date: Apr 13, 2011 7:18PM

Angela French wrote:
>
> <a href="http://www.vischeck.com/vischeck/" title="Link to External
> Site" class="external">Vischeck<span> - external link</span></a>
>
> /* External links */
> a.external span
> {
> position:absolute;
> left:0;
> top:-500px;
> width:1px;
> height:1px;
> overflow:hidden;
> }
>
> a.external:link
> {
> background: url(/media/template/externallink.gif) no-repeat 100% 0;
> padding-right: 20px;
> }


When it comes to linking to external documents, we can do something
similar - I always recommend that files sizes be indicated as well.

While this doesn't solve all of the problems, it does solve *one* of the
problems: have your CSS place an identifying icon into the page
'automagically'. (Replace the file extension with others of your
choosing):

a[href$='.pdf'] {
background-image: url(../images/icons/pdf_gray.png);
background-position: right;
background-repeat: no-repeat;
padding-right: 16px;
border:none;
line-height:16px;
border-bottom: 1px dotted gray;
}

a[href$='.pdf']:focus, a[href$='.pdf']:hover {
background-image: url(../images/icons/pdf.png);
background-position: right;
background-repeat: no-repeat;
padding-right: 16px;
border:none;
line-height:16px;
color:#830000;
border-bottom: 1px dotted #830000;
}

Works great in CMS solutions.

JF

(P.S. - For Microsoft Word, don't forget to use both .doc *AND* .docx -
ditto for PowerPoint: ppt/pptx)