E-mail List Archives

Re: Interesting effect with CSS

for

From: Bryan Garaventa
Date: Jan 19, 2012 12:42AM


Sounds great, thanks :) It helps a lot to have the behavior verified.

----- Original Message -----
From: "Vincent Young" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Wednesday, January 18, 2012 3:05 PM
Subject: Re: [WebAIM] Interesting effect with CSS


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