如何使固定网站标头为屏幕读取器工作
我已经在WordPress的Divi主题中实现了一个固定的标头，并给出了内容填充以将其从标题下方移出。要补偿固定的标头重叠的页面上锚添加的假锚点在实际锚文本上方偏移了一定数量的像素。 （我尝试了：元素解决方案，，scroll-padding-top和其他一些修复，但它们在Divi中没有工作）。到目前为止，一切都很好。
问题在于，当屏幕阅读器（例如，下巴）读取屏幕时，它会向下滚动页面。对于那些被部分看到的人（而不是盲人），重要的是要阅读的内容与屏幕上的内容相匹配。但是，固定的标头通常会掩盖我网站上的颚式读取的内容。
有人找到了解决方案吗？
这是我的（简化）代码...
.content {
padding-top: 100px;
}
.fake_anchor_section {
margin: -100px 0 100px;
}
<div class="content">
<a href="#example">Jump to example</a>
....
<div id="example" class="fake_anchor_section"></div>
<div>Real anchor section contents</div>
<div>
I've implemented a fixed header in the Divi theme on WordPress and given the content padding to move it out from under the header. To compensate for the fixed header overlapping in-page anchors I've added fake anchor points offset a certain number of pixels above the actual anchor text. (I tried the :before element solution, scroll-padding-top, and a few other fixes but they didn't work in Divi). So far so good.
The problem is that when a screen reader (for example, JAWS) reads the screen, it scrolls down the page. For people who are partially sighted (as opposed to blind), it's important that what's being read matches up with what's on the screen. However, what is read out by JAWS on my site is often obscured by the fixed header.
Has anyone found a solution to this?
Here's my (simplified) code...
.content {
padding-top: 100px;
}
.fake_anchor_section {
margin: -100px 0 100px;
}
<div class="content">
<a href="#example">Jump to example</a>
....
<div id="example" class="fake_anchor_section"></div>
<div>Real anchor section contents</div>
<div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是固定标头的另一个解决方案，该解决方案仅适用于网站的主要内容部分。
它可能需要在视口高度等方面修复的一些细节，它旨在演示从root中删除滚动并将其应用于另一个元素的基本思想。
Here is another solution to a fixed header, which simply applies scroll only to the main content part of the site.
It might need some details fixed in terms of viewport heights etc., it’s intended to demonstrate the basic idea of removing scroll from root and applying it to another element.