Tailwind CSS 主页
  1. 无障碍
  2. 屏幕阅读器

快速参考

类
属性
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

基本用法

仅屏幕阅读器可见的元素

使用 sr-only 来隐藏元素，使其在视觉上不可见，但不会隐藏在屏幕阅读器中

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

撤销仅屏幕阅读器可见的元素

使用 `not-sr-only` 取消 `sr-only`，使元素对视障用户和屏幕阅读器可见。例如，当您想在小屏幕上隐藏某些内容，但在较大屏幕上显示时，这很有用。

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

条件应用

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 `focus:not-sr-only` 仅在聚焦时应用 `not-sr-only` 实用程序。

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

有关所有可用状态修饰符的完整列表，请查看 悬停、聚焦和其它状态 文档。

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、 prefers-reduced-motion 等等。例如，使用 `md:not-sr-only` 仅在中等屏幕尺寸及以上时应用 `not-sr-only` 实用程序。

<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>

要了解更多信息，请查看有关 响应式设计、暗黑模式 和 其他媒体查询修饰符 的文档。