WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best practice for steering to screen reader-only stylesheets

for

From: Tech
Date: Jul 17, 2008 6:50PM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<br>
<big>Jared Smith wrote:<br>
&lt;&lt;Please explain what you're trying to accomplish.<br>
<br>
Jared, this is an issue I discussed earlier in the week, so I merely
posted my demo, and didn't re-explain it.&nbsp; Let me do so again here in
more detail.&nbsp; <br>
<br>
My question<a
href="http://76.100.0.7:2801/src/z-webpersist/jescrollgrid/demo1min.html.">
refers to this table with fixed-header solution, which I built. </a></big><br>
<br>
<big>The goal is to find a way to create, for sighted users, a fixed
and non-scrolling header above a data table that can have a variable
width, and not a more typical fixed-width grid style (which requires
horizontal scrollbars to see most of the columns out of view).<br>
<br>
Because the overflow property is not well supported on the TBody
element across browsers, there is no way anyone has come up with&nbsp; (that
I've found), which can make such a fixed header neatly align with the
columns below. The best efforts you can find anywhere use one of these
4 basic approaches: </big><br>
<ol>
<li>A pure CSS approach, that almost fails in one browser or another
with no fix possible<br>
<br>
</li>
<li>Some form of CSS/Javascript hack that comes close, but usually
fails in one browser or another.<br>
<br>
</li>
<li>A fixed-width grid, which, for reasons stated above,&nbsp; is just not
useful or desirable in many contexts (like mine), where the fluid style
is essential.<br>
<br>
</li>
<li>A dual table solution like mine, which uses javascript to keep
the upper header-table lined up with the lower body-table columns.&nbsp;<b>
Google docs,</b> and other heavy DHTML solutions have used this
approach, but theirs breaks in many browsers, or steps on the last
column's data with the scroll bar.</li>
</ol>
<b>My approach is #4, and can be seen at the link above.&nbsp; If you
examine the source, you can see the normal header, and the secondary
table acting as a header above it.&nbsp; In theory, the concept is to allow
screen readers to use the normal table header, which has no need to be
fixed, and allow sighted users to see the upper table--just a single
row of header elements--which can be fixed, allowing the data table to
scroll inside a div (with its overflow set to auto) below it.<br>
<br>
You can find literally thousands of posts on the web, of people trying
to achieve this fixed header concept on a fluid width table.&nbsp;
Christiane,in this group, posted many links to the better known of them
earlier this week.&nbsp; To my knowledge, mine is the only solution that
works in most&nbsp; browsers with no serious issues.<br>
<br>
</b><b>The only issue is, how to handle the accessibility aspects. Both
the original header row, and the clone of it--the fixed Header--must
exist in the same source.&nbsp; I need to explore ways to handle such a
situation.&nbsp;&nbsp; &nbsp; I am&nbsp; too new to the accessibility area to know what
options I might have.&nbsp; All I know is that just as Google docs used this
solution, I must use it too.&nbsp; I just want to do the best I can to make
it adequately accessible.&nbsp; If there are other solutions, I haven't
found them.&nbsp; Not having the fixed header feature is just not an option
I want to live with.&nbsp; It works too well, and is far too convenient for
sighted users who get very frustrated when they cannot tell what a
column contains after normal headers scroll from view.</b><br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;<br>
Jared Smith wrote:
<blockquote
cite="mid: <EMAIL REMOVED> "
type="cite">
<pre wrap="">On Thu, Jul 17, 2008 at 4:28 PM, Tech <a class="moz-txt-link-rfc2396E" href="mailto: <EMAIL REMOVED> ">&lt; <EMAIL REMOVED> &gt;</a> wrote:

</pre>
<blockquote type="cite">
<pre wrap="">When I designed my fluid grid with a fixed header and a scrolling body, I
assumed it would be simple to hide the extra header meant only for sighted
users, from screen readers (and vice versa).
</pre>
</blockquote>
<pre wrap=""><!---->
There is not a way (that I'm aware) of to display content in the page,
but have it ignored by a screen reader. I also can't think of a reason
why you would ever want to do this. If it's important enough to show
to sighted users, why not allow screen reader users to read it.

</pre>
<blockquote type="cite">
<pre wrap="">So I figure the only option is a link for "Goto Accessible version," which
I've never done before.
</pre>
</blockquote>
<pre wrap=""><!---->
It's probably not a good idea to create a separate version when the
main page can probably be made accessible. It's also a direct Section
508 violation (if you're concerned about such things). Please explain
what you're trying to accomplish.

</pre>
<blockquote type="cite">
<pre wrap="">Do I put it
right after the body tag, and hide, with display:none, which can still seen
by readers, or must it remain visible?
</pre>
</blockquote>
<pre wrap=""><!---->
Most screen readers will not read content styled with display:none or
visibility:hidden. The following article shows how to hide content
visually but allow it to be read by a screen reader -
<a class="moz-txt-link-freetext" href="http://webaim.org/techniques/css/invisiblecontent/">http://webaim.org/techniques/css/invisiblecontent/<;/a> This should be used
VERY sparingly and only when purely visual information would be useful
to screen reader users. For example, on the WebAIM site we use it to
identify the beginning of advertisement. Visual users can visually
identify the advertisement blocks, but screen reader users may not
know they are ads until after they read them.

</pre>
<blockquote type="cite">
<pre wrap="">Are there any bulletproof ways of detecting a reader, that I've never heard of yet?
</pre>
</blockquote>
<pre wrap=""><!---->
No.

Jared Smith
WebAIM
</pre>
</blockquote>
<br>
</body>
</html>