Bootstrap 4中是否有类似reverse sr-only的东西？答案

【问题标题】：Is there anything like reverse sr-only in Bootstrap 4?Bootstrap 4中是否有类似reverse sr-only的东西？
【发布时间】：2019-07-31 03:27:02
【问题描述】：

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

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

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

【问题讨论】：

您不应滥用 sr-only 类来插入 ASCII 艺术。顾名思义，该类适用于屏幕阅读器，因此适用于依赖页面内容配音的无视力用户。对他们来说，你的 ASCII 艺术将是完全无法理解的（“dash-dash-dash-vertical line-dot-dot”...）。如果您确实将 sr-only 类用于视觉 - 尽管不是图形 - 内容，请确保还添加 aria-hidden="true" 属性。

【解决方案1】：

很晚了，不确定它是否会有所帮助，但这就是我在隐藏缩写格式的同时向屏幕阅读器显示完整日期的方式，而对于有视力的人则相反观众。
我使用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>

【讨论】：