跳到主要内容问题[重复]答案

【问题标题】：Skip to main content problems [duplicate]跳到主要内容问题[重复]
【发布时间】：2017-03-25 14:01:37
【问题描述】：

我的任务是对网站进行一些可访问性改进。我要做的第一件事是通过创建一个带有 href="#main-content" 的链接来添加一个“跳转到主要内容”链接，其中“main-content”是包含主要内容的 div 的 id .添加链接本身是没问题的，主要内容的容器上有一个合适的id。

问题出在主菜单上。它位于页面顶部。当用户向下滚动菜单时，菜单会停留在页面顶部和滚动内容的顶部，即菜单具有固定位置和高 z-index。

当用户点击“跳转到主要内容”链接时，页面会滚动，以便主要内容位于浏览器的顶部，这是我所期望的。问题是它的第一部分被浮动在页面上方的主菜单遮挡了......

有没有办法在不删除“始终在顶部”主菜单的功能的情况下解决这个问题？

【问题讨论】：

这确实缺乏相当多的上下文，供读者解释。我假设，但请edit 回答您的问题，您正在使用命名锚并通过#link 跳转到该锚？
@CodeCaster。我已经编辑了我的问题以澄清。我确实使用了#link，但使用了带有id 的元素（div）。我相信标签的使用在 HTML5 中不再具有 name 属性。
是的，你读过副本吗？
@CodeCaster 但是你是对的，我的问题是你引用的那个的副本，而这又是另一个问题的副本：P

【解决方案1】：

这个问题实际上并不是 offsetting an html anchor to adjust for fixed header 的重复，因为它提到了“可访问性”。

当屏幕阅读器阅读您的页面时，您将遇到与单击“转到主要内容”链接时相同的问题：屏幕阅读器阅读的文本可能不会在视觉上显示并被固定位置菜单遮挡。

这将是一个可访问性问题。

您应该避免使用屏幕阅读器阅读时会覆盖另一个文本的“始终在顶部”菜单

【讨论】：

【解决方案2】：

我有一个骇人听闻的建议（根据上下文可能会或可能不会起作用，我看不到）：

main:target {
  padding-top: 3em;
}

该填充的大小需要根据菜单的高度进行更改。如果没有看到布局/设计，它是否能满足您的需求是未知的，但它既快速又简单。它也没有（似乎）提出任何可访问性问题。

我使用键盘友好的跳过链接 Codepen 并对其进行了调整（跳过链接并不理想，但它可以展示这个想法）：http://codepen.io/aardrian/pen/GNjZQZ

【讨论】：