WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ::after for doc types

for

From: John Foliot
Date: Aug 4, 2016 8:50AM

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 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 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 REMOVED>

Advancing the mission of digital accessibility and inclusion