W3C home > Mailing lists > Public > www-style@w3.org > September 2002

RE: Style Detection?

From: Adam van den Hoven <list@adamvandenhoven.com>
Date: Wed, 18 Sep 2002 12:17:17 -0700
To: <www-style@w3.org>
Message-ID: <2CFBE0D9CD992F41BE13069173C5C1C9019948@c2kxch.cucbc.com>

> George Lund writes:
> Rick Hill <rrhill@ucdavis.edu> writes
> >  The guidelines for creating pages that are accessible to 
> the disabled
> >require that pages be usable with styles off.  It would be 
> nice to be 
> >able to detect if styles are enabled or not on the client 
> browser and 
> >take actions to modify the page as appropriate (server-side 
> is better, 
> >client side would be nice, too).
> 
> Your pages (in HTML) shouldn't need to be modified because 
> they should 
> be accessible *anyway*.  Fortunately this means less work for 
> authors, 
> not more!

There are a few things to keep in mind when writing with accessibility
in mind. We just had an outside group do an accessibility audit on our
online banking application and the following bit me for the most part.

The first is that you should NOT assume that assistive technology (AT)
users will turn off style sheets. Jaws (and other screen readers) will
read styled HTML just fine so many keep CSS enabled. Nor do they read
your unstyled HTML, they read what the browser has rendered. 

This has some interesting implications with respect to positioning.
Assume that you have the following HTML:
<div class="contextnav">
<a href="#">Nav 1</a><div class="atspacer">&nbsp;|&nbsp;</div><!-- So
you can distinguish between one link and the next when CSS is disabled
-->
<a href="#">Nav 2</a><div class="atspacer">&nbsp;|&nbsp;</div>
<a href="#">Nav 3</a><div class="atspacer">&nbsp;|&nbsp;</div>
<a href="#">Nav 4</a><div class="atspacer">&nbsp;|&nbsp;</div>
<a href="#">Nav 5</a><div class="atspacer">&nbsp;|&nbsp;</div>
<a href="#">Nav 6</a><div class="atspacer">&nbsp;|&nbsp;</div>
<a href="#">Nav 7</a>
</div>
<div class="marketing">
Blah blah blah...
</div>
<div class="content">
Meaningful content goes here ...
</div>

With the following CSS:

div.contextnav, div.marketing{
position:relative;
width:75px;
}
div.contextnav a{
display:block;
}
div.atspacer{
 display:none;
}
div.content{
position:absolute;
top:0px;
left:0px;
width:670px;
Margin-left:100px;
}


You would expect to see two columns, the first 75px wide with the
context nav and some marketing stuff and then a second column would
contain the content. The two together would be 770px wide. 

The problem (and one that I haven't been able to resolve yet) is that
your left column will be read inline with the main content. Even if you
put the content block at the very top the apparently still happens. 

There is, I suspect, a solution to this little problem that doesn't
resort to decreasing the utility to sighted users. I have a hero cookie
for anyone who solves it for me. 

The second is that you can't expect AT users to have access to the
technologies you'd expect them to have. For instance, one would
reasonably expect that providing style sheets for "audio" or "tty" media
types would be useful to AT users. An audio browser would be more useful
than a screen reader and a Braille display would probably be want a tty
browser (I think). Unfortunately, I understand that these sorts of
products don't exist yet in the mainstream.

Just a bit of unsolicited help. 

Adam
Received on Wednesday, 18 September 2002 15:18:10 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:16 GMT