我的任务是对网站进行一些辅助功能改进。我要做的第一件事是添加一个"跳到主要内容"通过创建一个链接与href =" #main-content",其中" main-content"是包含主要内容的div的id。添加链接本身没有问题,并且容器上有适合主内容的id。
问题是主菜单。它位于页面顶部。当用户向下滚动时,菜单停留在页面顶部并位于滚动内容之上,即菜单具有固定位置且具有高z-index。
当用户跟随"跳到主内容"链接,页面滚动,以便主要内容位于浏览器的顶部,这是我所期望的。问题是它的第一部分被浮动在页面上方的主菜单遮挡了......
有没有一种方法可以解决这个问题,而无需使用"始终在顶部"主菜单?
答案 0 :(得分:0)
这个问题并不是offsetting an html anchor to adjust for fixed header的重复,因为它提及了#34;可访问性"。
当屏幕阅读器读取您的页面时,您将遇到与点击"转到主要内容"相同的问题。链接:屏幕阅读器读取的文本可能不会在视觉上出现并被固定位置菜单遮挡。
这将是一个辅助功能问题。
你应该避免"总是排在最前面"当屏幕阅读器读取时应覆盖另一个文本的菜单
答案 1 :(得分:0)
我有一个黑客的建议(根据具体情况可能会或可能不会起作用,我看不到):
main:target {
padding-top: 3em;
}
该填充的大小需要根据菜单的高度而改变。在没有看到布局/设计的情况下,它是否能够满足您的需求是未知的,但它快速而简单。它似乎也没有(似乎)提出任何可访问性问题。
我使用了键盘友好的跳过链接Codepen并对其进行了调整(跳过链接并不理想,但它可以显示这个想法):http://codepen.io/aardrian/pen/GNjZQZ