There was some talk of skipnavs.... here's what I normally use:
<div class="skipnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#skipbgprimarynav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" alt="Skip primary navigation." width="1" height="1" border="0">
</a>
</div>
<ul class="leftnav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a></li>
</ul>
<div class="skipnav">
<a name="skipbgsecondarynav"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" alt="" width="1" height="1" border="0"></a>
</div>
.skipnav {
width: 1px;
height: 1px;
position: absolute;
visibility: hidden;
}
There's debate over all this stuff, of course, so this is just my current pref. And this is the example to skip from where a set of links begins, to where it ends. You can skip sections or whatever. Whatever is repeated on a page, folks using screen readers don't want to have to wade through it over and over.It might be a good idea to use the title attribute on your links.
Have your content before navigation in the normal page flow.Originally posted by Vladdy
Have your content before navigation in the normal page flow.
About, and I'm just guessing, 85% of the time I do just that, but sometimes (rarely) there's two sets of navigation, or something, and I style them differently; so in the event that you do have the navigation first, for some reason, there is the option of skipping navigation. So I can see where TimeBandit here is coming from.I'm often working on projects that have header nav, left nav, footer nav. I don't think I'm talented enough to put all that nav after the content and then make it display well visually - sometimes I am prohibited from using position: absolute.
In addition, we're not only thinking about people using screen readers, but people who have style sheets turned off or are using their own. So we prefer to have topnav and usually leftnav before content, footer after.Then it should be one line and no spacer gifs:
<a href"#content" style="display:none">Skip Navigation</a>The text often takes up too much room to be used as a direct link, as you have illustrated. We're still debating whether we should just put the darn link on the screen or not, like you're saying, but we're not debating very much. The spacer.gif is smaller. We can hide it more easily from visual users.Originally posted by TimeBandit
...sometimes I am prohibited from using position: absolute...
The WCAG 1.0 says that you should avoid using absolute positioning if at all possible. Try floating objects instead.I'm not really using the objects i am positioning. Just trying to take them out of the flow. Some would argue I shouldn't float them because they are not intended to float. They are intended to be "hidden", taken out of the flow, and only available to assistive technologies in the most unobtrusive manner to the visual layout as I can muster. And they're available if someone has styles off.I must've missed something; if you weren't talking about how you visually layout your page, then ignore my comment. 
Originally posted by TimeBandit
The text often takes up too much room to be used as a direct link, as you have illustrated. We're still debating whether we should just put the darn link on the screen or not, like you're saying, but we're not debating very much. The spacer.gif is smaller. We can hide it more easily from visual users.
display:none does not hide it good enough for you
When we hammered out this technique, you are correct that "display: none" was not good enough for us. Our research showed that some assitive technologies, like JAWS, supposedly did not "read" an element that was set to none, but hidden was OK. We may revisit it now that we actually use JAWS to review 508 compliant sites, because the newest version is different.
<div class="skipnav">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#skipbgprimarynav">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" alt="Skip primary navigation." width="1" height="1" border="0">
</a>
</div>
<ul class="leftnav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link2</a></li>
</ul>
<div class="skipnav">
<a name="skipbgsecondarynav"><img src=http://www.webdeveloper.com/forum/archive/index.php/"images/spacer.gif" alt="" width="1" height="1" border="0"></a>
</div>
.skipnav {
width: 1px;
height: 1px;
position: absolute;
visibility: hidden;
}
There's debate over all this stuff, of course, so this is just my current pref. And this is the example to skip from where a set of links begins, to where it ends. You can skip sections or whatever. Whatever is repeated on a page, folks using screen readers don't want to have to wade through it over and over.It might be a good idea to use the title attribute on your links.
Have your content before navigation in the normal page flow.Originally posted by Vladdy Have your content before navigation in the normal page flow.
About, and I'm just guessing, 85% of the time I do just that, but sometimes (rarely) there's two sets of navigation, or something, and I style them differently; so in the event that you do have the navigation first, for some reason, there is the option of skipping navigation. So I can see where TimeBandit here is coming from.
I'm often working on projects that have header nav, left nav, footer nav. I don't think I'm talented enough to put all that nav after the content and then make it display well visually - sometimes I am prohibited from using position: absolute.In addition, we're not only thinking about people using screen readers, but people who have style sheets turned off or are using their own. So we prefer to have topnav and usually leftnav before content, footer after.Then it should be one line and no spacer gifs:
<a href"#content" style="display:none">Skip Navigation</a>The text often takes up too much room to be used as a direct link, as you have illustrated. We're still debating whether we should just put the darn link on the screen or not, like you're saying, but we're not debating very much. The spacer.gif is smaller. We can hide it more easily from visual users.Originally posted by TimeBandit
...sometimes I am prohibited from using position: absolute...
The WCAG 1.0 says that you should avoid using absolute positioning if at all possible. Try floating objects instead.
I'm not really using the objects i am positioning. Just trying to take them out of the flow. Some would argue I shouldn't float them because they are not intended to float. They are intended to be "hidden", taken out of the flow, and only available to assistive technologies in the most unobtrusive manner to the visual layout as I can muster. And they're available if someone has styles off.I must've missed something; if you weren't talking about how you visually layout your page, then ignore my comment. Originally posted by TimeBandit The text often takes up too much room to be used as a direct link, as you have illustrated. We're still debating whether we should just put the darn link on the screen or not, like you're saying, but we're not debating very much. The spacer.gif is smaller. We can hide it more easily from visual users.
display:none does not hide it good enough for you
When we hammered out this technique, you are correct that "display: none" was not good enough for us. Our research showed that some assitive technologies, like JAWS, supposedly did not "read" an element that was set to none, but hidden was OK. We may revisit it now that we actually use JAWS to review 508 compliant sites, because the newest version is different.