屏幕阅读器

​基本用法(Basic usage)

​仅限屏幕阅读器的元素(Screen-reader-only elements)

使用 sr-only 可以在视觉上隐藏元素，但不会让屏幕阅读器无法读取该元素：

🌐 Use sr-only to hide an element visually without hiding it from screen readers:

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

​撤消仅限屏幕阅读器的元素(Undoing screen-reader-only elements)

使用 not-sr-only 来撤销 sr-only，使元素对有视力的用户以及屏幕阅读器可见。当你想在小屏幕上视觉上隐藏某些内容，但在大屏幕上显示时，这会很有用，例如：

🌐 Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

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

---

​有条件申请

​悬停、聚焦及其他状态

Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如，使用focus:not-sr-only 仅在 focus 时应用 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>

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