E-mail List Archives
Number of posts in this thread: 3 (In chronological order)
From: Joseph Sherman
Date: Aug 3, 2016 8:45AM
Subject: ::after for doc types
No previous message | Next message →
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
From: Swift, Daniel P.
Date: Aug 3, 2016 9:00AM
Subject: Re: ::after for doc types
← Previous message | Next message →
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
From: John Foliot
Date: Aug 4, 2016 8:50AM
Subject: Re: ::after for doc types
← Previous message | No next message
or, rather...
$(this).append('text <img src="docIcon.png" alt="word document">');
(without the alt text, it remains inaccessible ;-) )
JF
On Wed, Aug 3, 2016 at 10:00 AM, Swift, Daniel P. < = EMAIL ADDRESS REMOVED = > wrote:
> 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
>
>