[英]sr-only class causing page scroll
I want to make some content available to screen readers but not visible on the page.我想让一些内容对屏幕阅读器可用,但在页面上不可见。 Taking it off the page result in screen readers not announcing it, so I'm using a common hacky workaround, the
sr-only
class, used for instance by Bootstrap.将其从页面上删除会导致屏幕阅读器不会宣布它,因此我使用了一种常见的 hacky 解决方法,即
sr-only
class,例如由 Bootstrap 使用。 Here's Kitty Giraudel 's version:这是Kitty Giraudel的版本:
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
height: 1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
The problem is with the position: absolute
rule, which necessitates a parent with position: relative
.问题在于
position: absolute
规则,它需要一个具有position: relative
的父级。 Without it, the invisible content may end up at the bottom of the page and cause the browser to add scrollbars.没有它,不可见的内容可能会出现在页面底部并导致浏览器添加滚动条。 I don't like having to have to add that
position: relative
rule on top of the sr-only
class.我不喜欢必须添加 position:在
sr-only
class 之上的position: relative
规则。 It can easily be forgotten or accidentally removed.它很容易被遗忘或意外删除。 It would be easier if adding the class was the only needed step, which seems possible by simply adding
top: 0
to these rules.如果添加 class 是唯一需要的步骤,这将更容易,这似乎可以通过简单地将
top: 0
添加到这些规则。 But I'm a little nervous tweaking with such ancient wisdom.但我对这种古老的智慧有点紧张。 Is there a reason why it's not commonly done this way?
有没有理由不经常这样做? Am I missing a potential issue with
top: 0
?我错过了
top: 0
的潜在问题吗?
No, do not use top: 0
不,不要使用
top: 0
First the issue you linked in the comments is using a very broken (and old as far as I can tell) screen reader only class, I think it has been updated (and if not then that just reinforces my opinions on using Font Awesome. ).首先,您在评论中链接的问题是使用一个非常损坏(据我所知很旧)的屏幕阅读器 class,我认为它已经更新(如果没有,那只会加强我对使用 Font Awesome 的看法。) .
The screen reader class you linked is identical to the visually hidden text class I created / use (which just shows if two of us came up with the same thing it might just be right!) and should not cause the issue described as it uses clip-path: inset(50%)
.您链接的屏幕阅读器 class 与我创建/使用的视觉隐藏文本 class相同(这只是表明我们两个人是否想出了同样的事情,它可能是正确的!)并且不应该导致描述的问题,因为它使用
clip-path: inset(50%)
。
clip-path: inset(50%)
effectively makes the element 0px high and 0px wide, so you should never get any overflow issues because of it. clip-path: inset(50%)
有效地使元素 0px 高和 0px 宽,所以你不应该因为它而遇到任何溢出问题。
Also the scroll bar issue tends to be caused by the margin: -1px
part (which you notice we aren't using in our classes), but without something to test against I cannot confirm that is the case here.此外,滚动条问题往往是由
margin: -1px
部分(您注意到我们没有在我们的课程中使用),但是没有东西可以测试我无法确认这里的情况。
As for adding top: 0
don't do this - you are indeed wise to not mess with old wisdom.至于添加
top: 0
不要这样做- 你确实是明智的,不要与旧智慧混淆。
The second you start moving the position of the element some screen readers will try and compensate for the positioning (thinking that you are a bad developer and using absolute positioning to change the order of things on the page instead of changing DOM order), resulting in strange reading orders.在您开始移动元素的 position 的那一刻,一些屏幕阅读器会尝试补偿定位(认为您是一个糟糕的开发人员并使用绝对定位来更改页面上的事物顺序而不是更改 DOM 顺序),从而导致奇怪的阅读顺序。
I have used the class I linked for 2 years now without ever seeing any unexpected scroll bars so you should be safe.我已经使用了 class 我已经链接了 2 年,没有看到任何意外的滚动条,所以你应该是安全的。
With all that being said, if you do manage to put together a codepen / fiddle etc. that demonstrates the issue you described with the class I recommend or the class in your question then please let me know as that is something I would want to address!话虽如此,如果您确实设法将代码笔/小提琴等放在一起,以证明您使用我推荐的 class 或您的问题中的 class 描述的问题,那么请告诉我,因为这是我想要解决的问题!
In the bug report you linked in the comments , do not do as the final message suggests:在 您在评论中链接的错误报告中,不要按照最终消息的建议进行操作:
- Size the element such that it is 0xN, or Nx0 (eg "width: 0" or similar).
调整元素的大小,使其为 0xN 或 Nx0(例如“宽度:0”或类似内容)。
- Make the element "display: none".
使元素“显示:无”。
- Surround the element in a 0x0 div which is also "position: absolute".
将元素包围在 0x0 div 中,这也是“位置:绝对”。
All 3 of the above options would render the text completely invisible to a screen reader user (remove the element from the accessibility tree) and completely break the point of using a screen reader only class.上述所有 3 个选项将使屏幕阅读器用户完全看不到文本(从可访问性树中删除元素),并完全打破仅使用屏幕阅读器 class 的观点。
Options 4 and 5 are feasible options though:选项 4 和 5 是可行的选项:
- Make "viewport-router" a containing block (eg "position: relative" or similar).
使“viewport-router”成为一个包含块(例如“位置:相对”或类似的)。
- Change the "viewport-main" to "overflow-y: hidden" or similar.
将“viewport-main”更改为“overflow-y: hidden”或类似的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.