E-mail List Archives
Thread: ::after for doc types
Number of posts in this thread: 3 (In chronological order)
From: Joseph Sherman
Date: Wed, Aug 03 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: Wed, Aug 03 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
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS 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
From: John Foliot
Date: Thu, Aug 04 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS 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
>
> > > at http://webaim.org/discussion/archives
> > > > > >
--
John Foliot
Principal Accessibility Strategist
Deque Systems Inc.
= EMAIL ADDRESS REMOVED =
Advancing the mission of digital accessibility and inclusion