我正试图从主题中理解可访问性风格，但它们对我来说似乎有些过头了。有人能向我解释每行或每组行的原因吗？这样我就可以决定我的使用需要什么了。
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
-wrap: normal !important;
/* Many screen reader and browser combinations announce broken
words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
.screen-reader-text类用于添加非视觉文本(您看不到它)，但文本仍在DOM中，以便屏幕阅读器可以访问它。您可以使用它为屏幕阅读器添加额外的文本。例如，如果你有这样的东西：
<p>we sell cool stuff</p>
<a href="some url">read more</a>
有视力的用户知道"阅读更多"指的是阅读更多关于酷东西的内容。但对于屏幕阅读器用户来说，如果他们选项卡到链接，或者如果他们打开一个显示页面上所有链接的对话框，他们只会听到"阅读更多"。他们会想，"读更多关于什么的书？"。
你可以通过添加非视觉文本来解决这个问题，例如：
<p>we sell cool stuff</p>
<a href="some url">read more <span class="screen-reader-text">about cool stuff</span></a>
现在，当屏幕阅读器移动到链接时，他们会听到"阅读更多关于酷东西的内容"，但你不会在页面上的任何地方看到"关于酷东西"。
许多第三方库都有这样的类。例如，什么是仅在引导程序3中的sr？
至于每个CSS属性的作用，您可以查找。所有这些属性都需要让"隐藏"文本在所有浏览器(firefox，即chrome、safari)、屏幕阅读器(jaws、nvda、画外音、对讲)和操作系统(pc、mac、ios、android)中工作。如果你去掉其中一个属性，它可能在你测试的平台上有效，但可能会用不同的组合破坏。
.screen-reader-text应用于要在屏幕上以视觉方式隐藏但仍使用屏幕读取器渲染的对象。
不同的行是隐藏文本的不同方式，同时仍然使其可供屏幕阅读器阅读。
当元素用键盘聚焦时，.screen-reader-text:focus将反转先前的样式，以使屏幕阅读器聚焦的任何对象都可见。
然而，为屏幕阅读器隐藏文本必须被视为一种坏习惯，因为屏幕阅读器用户也可能是有视力的用户(失语症、瘫痪、视力低下的人)，而这些人可能使用鼠标或眼动追踪设备。。。