使用CSS进行“跳过导航”以获得508合规性的最佳方式

时间:2010-04-01 15:56:58

标签: html css section508

第508节要求在所有网页的顶部编码“跳过导航”,以便让Seeing Impaired绕过冗长且重复的顶部导航。

最初,我认为最好的方法是将单词放在页面中并使用CSS“display:none”来显示它们。但我读过你也不能这样做。

有人知道在所有页面顶部执行“跳过导航”超链接的最佳做法,但是屏幕上没有显示给有视力或没有其他残疾的人吗?这可以用CSS完成而不使用“Display:none”注释吗?

3 个答案:

答案 0 :(得分:4)

我的印象是当你display:none屏幕阅读器可能丢弃该元素时。我不完全遵循他们为什么这样做,但我想这就是为什么他们是“屏幕”读者而不是“HTML”读者。

我倾向于使用position:absolute删除我仍希望屏幕阅读器可见的元素。有点像...

a#skip_to_content {
    position:absolute;
    top:-10000px;
    left:-10000px;
}

...但我没有读任何内容确认这是建议的解决方案。

如果您正在尝试开发可访问的网站并希望快速测试您的网页,则应该查看Fangs FireFox plugin。它模拟了流行的屏幕阅读器Jaws如何在您的网站上查看和组织信息。

答案 1 :(得分:0)

我认为这个链接很有用: http://www.hicksdesign.co.uk/journal/skip-navigation-links

我在荷兰辅助功能指南网站上找到了它,这对您可能也有用: http://versie1.webrichtlijnen.nl/english/manual/development/production/link-navigation/links-for-serial-navigation/#r-pd-8-12

这不完全是第508节,但他们试图完成同样的事情。

答案 2 :(得分:0)

看看assets.cms.gov。他们有一个很好的基于Twitter Bootstrap的框架,具有508兼容的jQuery UI控件。 Skip Navigation也在框架中实现