屏幕阅读器文本

类

将这个类用于仍应供辅助技术读取的文本。它不是禁用元素或将元素移出键盘导航的方式。

视觉裁剪与无障碍命名是两回事

sr-only 让元素脱离常规流，将其设为 1px 的盒子，并裁剪绘制区域。它不会应用 display: none、visibility: hidden 或 aria-hidden，因此文本仍可用于形成无障碍名称。

箭头具有 aria-hidden="true"。标签文本由 sr-only 在视觉上裁剪，并提供链接的无障碍名称。链接本身仍可见且可聚焦。

文字说明

1. 链接包含一个不参与无障碍名称计算的箭头，以及一个包含 Read the utility definition 的 span。
2. span 使用实际的 sr-only 预设样式：绝对定位、1px 盒子、隐藏溢出与裁剪。它仍留在 DOM 中，没有设置 aria-hidden。
3. 可见链接仍占用 40px 正方形区域，并显示箭头。它的无障碍角色是 link，名称为 Read the utility definition。
4. 两个分支是同一个控件的不同表示，不是按顺序执行的操作。如果祖先元素从无障碍树中隐藏，其后代元素也会一并隐藏。

将类放在控件内的标签文本上，让控件本身保持可见且可聚焦。标记为 aria-hidden="true" 的图标不会参与名称计算，便可由文本描述操作。

不要将可聚焦的控件放入始终被裁剪的区域，否则键盘用户可能移到看不见的控件。跳转到内容的链接需要自行设置聚焦时显示的样式；预设没有提供 not-sr-only 反向工具类。

如果祖先元素将整个子树移出无障碍树，这段文本也会一并移除。sr-only 无法抵消祖先元素上的 hidden、display: none 或 aria-hidden="true"。请在实际控件中测试最终的角色与名称。

另见 无障碍名称.

用法

为只有图标的链接提供名称，让它打开下方的工具类定义。

<a href="#customize">  <span aria-hidden="true">↓</span>  <span class="sr-only">Read the utility definition</span></a>

@layer utilities {  .sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border-width: 0  }}

自定义

预设使用 @utility 定义这些类。在样式表中定义相同名称即可替换原有定义。

@utility sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border-width: 0;}

另见 工具类定义.