WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Interesting effect with CSS

for

From: Leif Halvard Silli
Date: Jan 8, 2012 4:42AM

Patrick H. Lauke, Sun, 08 Jan 2012 11:20:33 +0000:
> On 08/01/2012 03:37, Jared Smith wrote:
>> On Sat, Jan 7, 2012 at 7:28 PM, Bryan Garaventa wrote:
>>
>>> Which is invisible in IE using JAWS and NVDA. However this actually
>>> is visible in both JAWS and NVDA using Firefox.
>>
>> Interesting. I'd think it would be preferable to have this CSS content
>> NOT read by any screen reader. If used correctly, CSS shouldn't be
>> used to present real content.
>
> I think that's one of those chicken and egg situations...if authors used
> CSS the way it's meant, and in particular didn't use CSS content for
> actual important content generation, then yes screenreaders should
> ignore it. As there are probably enough cases where this isn't happening
> (i.e. enough sites that do rely on CSS content for important content),
> assistive technology had to adapt.

There is an alternative to using
li:before{content:'txt'}
and that is to use the ::marker pseudo element:
li::marker{content:'txt'}

The only parser I know with support for ::marker, is Prince XML. But at
any rate, I suppose that when support is there, the UA and screenreader
would know that the marker should not be read.

Another way to solve this problem would be to use media queries and
then to not send the 'content CSS' to the screenreaders. But so far,
screenreaders have not implemented media queries, so we are out of
luck.

Until further, I guess Bryan could use
li{list-style-image:url(plus-image-url)}
That should solve the issue. If scaling of the image is an issue, then
I presume that it starting to become possible to use svg images, which
should scale. Huh, it would even be possible to use the content:;
property, only filling it with no-break-space and then to place a
background image behind it.
--
Leif H Silli