css - Bootstrap 4 中是否有类似 reverse sr-only 的东西?

标签 css html twitter-bootstrap bootstrap-4

我使用 .sr-only 是为了与 Lynx 等基于文本的浏览器兼容。例如,我在页眉上放了一个 ASCII 标志,所以如果有人使用标准的 GUI 浏览器(如 Firefox)浏览网站,它会显示正常的图形标志。否则,它显示 ASCII 文本标识。

但是在联系页面上,有一个 OpenStreetMap iframe。我也在那里放了一个 ASCII 映射,但是当我在 Lynx 中打开页面时,OSM 嵌入了一个长 URL 和错误消息。

这是我的问题:我想让 OSM 嵌入仅在使用屏幕阅读器/文本浏览器时可见。这就像反向 sr-only。

最佳答案

很晚了,不确定它是否会有帮助,但这就是我在隐藏缩写格式的同时向屏幕阅读器显示完整日期的方式,而对于有视力的人则相反 观众。
我使用 aria-hidden 在屏幕阅读器中隐藏了为有视力的观众准备的文本,并使用 aria-label 让屏幕阅读器查找和阅读:

<span aria-label="Beginning April 25 2017 until December 31 2035">
    <span aria-hidden="true">2017/04/25 - 2035/12/31</span>
</span>                    

关于css - Bootstrap 4 中是否有类似 reverse sr-only 的东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49658736/

相关文章:

javascript - 外部 javascript 文件在 IE 中不起作用

javascript - html按钮在没有被禁用的情况下不可点击

javascript - Jquery 切换两个或多个类

javascript - 将结束 HTML 标记替换为 HTML 标记 +\n

Javascript 转换一个接一个

html - 绝对位置 div 防止 td 在 firefox 中达到 0 高度

jquery - Bootstrap 模态表单适用于本地计算机,但不能实时运行

css - Bootstrap glyphicon 内容在 ASP.NET MVC 缩小后被破坏

javascript - 刷新网站时的暗模式延迟

javascript - 导航栏不会在 iFrame 中保持静态