屏幕阅读器

​基本用法

¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:not-sr-only to only apply the not-sr-only utility on focus.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

​断点和媒体查询

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:not-sr-only to apply the not-sr-only utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.