ACCESSIBILITY
屏幕阅读器专用文本Screen Reader Only
视觉上不可见、但会被屏幕阅读器朗读的文本。用来给纯图标按钮、需要额外解释的标题补语义。
效果预览
🔍纯图标搜索按钮，视觉无文字
aria-label="搜索"↗外链提示，视觉靠箭头表示
sr-only「新窗口打开」♡收藏按钮，需说明对象
aria-label="收藏 定价方案"适合用在哪
图标按钮的 label、表单控件的说明、「新窗口打开」提示、页码上下文。
容易踩的坑
- 可聚焦元素用 sr-only 却不在聚焦时显示，键盘用户会停在隐形元素上。
- 图标按钮同时写了 aria-label 和 sr-only 文本，读屏会重复念两遍。
- sr-only 文本与可见文案不一致，语音控制用户说出看到的文字却无法触发。
设计提示词 · Prompt
屏幕阅读器专用文本（Screen Reader Only）：用一个 .sr-only 工具类 —— position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0。注意：绝对不要用 display:none 或 visibility:hidden（会把内容从无障碍树里一起移除）。常见用法是给纯图标按钮加 aria-label，或者标题后用 sr-only 补充上下文（如「阅读更多，关于 定价方案」），避免屏幕阅读器用户听到一串重复的「阅读更多」。
Screen Reader Only: use an .sr-only utility class — position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0. Note: never use display:none or visibility:hidden (they remove the content from the accessibility tree as well). Common uses: add aria-label to icon-only buttons, or append sr-only context after a heading (e.g. "Read more, about pricing plans") so screen reader users don't hear a string of repeated "Read more".
常见搭配
同一页面里经常和「屏幕阅读器专用文本」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="a11y-sr">
<div class="a11y-sr__i"><span class="a11y-sr__ico">🔍</span><span class="a11y-sr__t">纯图标搜索按钮，视觉无文字</span><code class="a11y-sr__code">aria-label="搜索"</code></div>
<div class="a11y-sr__i"><span class="a11y-sr__ico">↗</span><span class="a11y-sr__t">外链提示，视觉靠箭头表示</span><code class="a11y-sr__code">sr-only「新窗口打开」</code></div>
<div class="a11y-sr__i"><span class="a11y-sr__ico">♡</span><span class="a11y-sr__t">收藏按钮，需说明对象</span><code class="a11y-sr__code">aria-label="收藏 定价方案"</code></div>
</div>
</div>