螢幕閱讀器

​基本用法

​僅螢幕閱讀器可見元素

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

如要進一步了解，請查看關於 回應式設計、 暗色模式 和 其他媒體查詢修改器 的文件。