WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ::after for doc types

for

From: Swift, Daniel P.
Date: Aug 3, 2016 9:00AM

You could use JS to check links on page load and append the icon to the link if the href ends in docx (for instance). I would think that would work okay.

Before:
<a href="something.docx">text</a>

After:
<a href="something.docx">text <img src="docIcon.png"/></a>

In jQuery, something like:
$(document).ready(function(){
$('a[href$="docx"]').each(function(){
$(this).append('text <img src="docIcon.png"/>');
});
});

My syntax might be a little off, but that would be the gist. Obviously include appropriate accessibility tags to go along with the image.

-Dan

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Wednesday, August 03, 2016 10:46 AM
To: 'WebAIM Discussion List'
Subject: [WebAIM] ::after for doc types

My web people are adding document type to links using ::after.

So a Document link looks like Document DOCX<www>. The ::after content attribute is "pdf" "docx" etc.

Of course this indication is not read in some screen readers. They are doing it through CSS so that it is added automatically, and does not require that the folks that upload the content add the file type to their links every time.

Is there a way to keep doing this automatically and be accessible?


Joseph