WebAIM - Web Accessibility In Mind

E-mail List Archives

CSS-P, layers, links and accessibility

for

From: Leo Smith
Date: Jul 25, 2001 6:57AM

Hi everyone,
I had a couple of questions regarding CSS absolute positioning and accessibility that I was hoping someone could clear up for me.
I am hoping to implement CSS-P (absolute positioning or what Dreamweaver calls layers) as much as possible in the site that I am presently redesigning, as I would very much like to get away from using tables for complex layouts.
I have read a good deal of literature about web accessibility and the fact that CSS should be used as much as possible for presentation and layout. The W3C techniques section for checkpoints 3.3 and 5.3 states that:
Layout, positioning, layering, and alignment should be done through style sheets (notably by using CSS floats and absolute positioning):
'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects.
However, I have found that when using layers, that links contained within them are not accessible via the tab key in Netscape 4x or 6, whether I use the <div> or <span> tag to code the layer.
For example:
<span id="Layer1" style="position:absolute; visibility:visible; z- index:1; left:50px; top:150px; width:100px"><a href="somewhere.htm">link</a></span>
or
<div id="Layer1" style="position:absolute; visibility:visible; z- index:1; left:50px; top:150px; width:100px"><a href="somewhere.htm">link</a></div>
neither of these allow links contained within them to be tabbed to when viewed in these browsers.
I have not read anything in the 508 or W3C guidelines that specifically says all links on a page should be accessible through the tab key, other than W3C Priority 3 specification 9.4 which states "create a logical tab order through links, form controls and objects".
Does the fact that Netscape 4x or 6 browsers do not allow access to links within a layer through the tab key mean that absolute positioning should be avoided?

Also, both the 508 and the W3C guidelines state that a document should be readable when style sheets are turned off.
Am I correct in assuming that inline styles do not come under "style sheet" in this directive?
That is, an inline style such as:
<span style="background-color:#ffffcc">hello everybody</span>
or like the layers above:
<div style="position:absolute; left:10px; top:50px; width:100px">The quick brown fox jumped over the log</div>
would not be included under this style sheet independence directive.

Thanks so much for your time and valuable input.
Best,
Leo.
Leo Smith
USM Office of Publications and Marketing
207-780-4774