无障碍
用于提高屏幕阅读器可访问性的工具。
¥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>