WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interesting effect with CSS

for

From: Vincent Young
Date: Jan 18, 2012 4:03PM

After doing a bit more research and testing, font images should be
avoided. Even when they are mapped directly to their unicode image
equivalent they can cause problems as some unicode values are spoken by
assistive technology, even when using the CSS content attribute. This if
often undesirable. Jason Santa Maria makes sense of the semantic and
accessibility issues in this article:
http://jontangerine.com/log/2010/08/web-fonts-dingbats-icons-and-unicode

Other scalable image techniques such as SVG (VML for IE) should be explored.


On Tue, Jan 17, 2012 at 4:34 PM, Vincent Young < <EMAIL REMOVED> >wrote:

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