WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interesting effect with CSS

for

From: Vincent Young
Date: Jan 17, 2012 5:33PM

A Site Point article just came out which makes use of the CSS content
attribute:

http://www.sitepoint.com/webfont-icons/

The example creates an "icon font" where images are mapped to characters so
that instead of using background images, you use a single font to generate
all your site's icon images.

The accessibility problem is one we discussed in this thread, the content
attribute is used to add the characters which NVDA has problems with.

I've put together an example which works visually in all browsers including
IE6 and IE7:

http://www.webhipster.com/testing/accessibility/webfonts/ie.html

You will hear b then rss when you focus the link which is obviously not
ideal. We want is just rss.


I've put together another example using a font which uses unicode
characters to map to images (instead of a-z) which seems to be fine in
NVDA. However, this does not work in IE6 and IE7 which is why the previous
example does not use unicode characters.

http://www.webhipster.com/testing/accessibility/webfonts/non-ie.html


So, this example seems to be OK, but I'm wondering what the best solution
is when you need to support IE6 and IE7?

Is there a standard we should be advocating within the development
community for this type of technique? I assume this will get more popular
and we should have a consensus.



On Mon, Jan 9, 2012 at 2:14 PM, Ryan Hemphill
< <EMAIL REMOVED> >wrote:

> No, what I mean is that the content is somehow being scraped by JAWS and
> then dumped afterwards. It isn't necessarily the DOM at all and I suspect
> it isn't. While I can't much without doubt, I am absolutely certain that
> it is being somehow brought into the virtual buffer BEFORE it is deleted.
>
> Also, take into account that you are able to copy/paste the :before/:after
> text by normal mouse highlighting means. I haven't tried doing this
> through JAWS but I imagine there might be some fascinating results if
> someone is interested in pursuing it.
>
> My guess is that they are pulling all the CSS so they can keep it in mind
> for future releases and deleting/ignoring everything that isn't currently
> important. Other than that fact, I know as much as the rest of you.
>
> Wouldn't it be interesting if JAWS had it's own 'virtual browser'? And if
> that were the case, would be it using things like webkit? Hmmm. It would
> certainly explain some of the bugs I have seen from time to time.
>
> Food for thought.
>
>
>
>
> On Mon, Jan 9, 2012 at 12:05 PM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
> > Thanks, when you say deleted, is it briefly showing up in the DOM? I've
> > wondered how CSS renders content without actually changing the DOM, do
> you
> > know how this is done?
> >
> > ----- Original Message -----
> > From: "Ryan Hemphill" < <EMAIL REMOVED> >
> > To: "WebAIM Discussion List" < <EMAIL REMOVED> >
> > Sent: Sunday, January 08, 2012 4:43 PM
> > Subject: Re: [WebAIM] Interesting effect with CSS
> >
> >
> > > I've run some tests on that. It's inconsistent at best and can also
> > > interfere with the formatting in some cases because it is deleted (at
> > > least
> > > it appears) AFTER added to JAWS' virtual buffer.
> > >
> > > That's my 2 cents.
> > >
> > > Ryan
> > > On Jan 7, 2012 9:29 PM, "Bryan Garaventa" <
> <EMAIL REMOVED> >
> > > wrote:
> > >
> > >> I came a cross this the other day.
> > >>
> > >> For a while I thought that using the CSS technique :after or :before
> > >> would
> > >> be useful for displaying content visually but hiding it from screen
> > >> readers, such as adding a graphical arrow or plus/minus sign on a menu
> > or
> > >> similar like so:
> > >>
> > >> li.treeitem:after {
> > >> content: '+';
> > >> }
> > >>
> > >> Which is invisible in IE using JAWS and NVDA. However this actually is
> > >> visible in both JAWS and NVDA using Firefox.
> > >>
> > >> No idea if this is helpful or not, but I thought it was interesting.
> > >>
> > >> Bryan
> > >>