Screen Readers 屏幕阅读器

改善屏幕阅读器的辅助工具。

Class	Properties

基本用法

屏幕阅读器专用元素

使用 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>

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

断点和媒体查询

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

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

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