css - 请解释 WordPress 2019 主题的屏幕阅读器文本样式
问题描述
我试图从主题中理解可访问性样式,但它们对我来说似乎有点矫枉过正。有人可以向我解释每行或每组行的原因,以便我可以决定我的使用需要什么。
.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>
有视力的用户知道“阅读更多”是指阅读更多关于酷的东西。但是屏幕阅读器用户,如果他们tab访问链接,或者如果他们打开一个显示页面上所有链接的对话框,他们只会听到“阅读更多”。他们会想,“阅读更多关于什么?”。
您可以通过添加非可视文本来解决此问题,例如:
<p>we sell cool stuff</p>
<a href="some url">read more <span class="screen-reader-text">about cool stuff</span></a>
现在,当屏幕阅读器移至链接时,他们会听到“阅读更多关于酷的东西”,但您不会在页面上的任何地方看到“关于酷的东西”。
许多第三方库都有这样的类。例如,Bootstrap 3 中的 sr-only 是什么?
至于每个单独的 CSS 属性的作用,您可以查看它。需要所有这些属性才能使“隐藏”文本在所有浏览器(firefox,即 chrome、safari)、屏幕阅读器(jaws、nvda、画外音、对讲)和操作系统(pc、mac、ios、android)上工作)。如果您忽略其中一个属性,它可能在您正在测试的平台上工作,但可能会因不同的组合而中断。
推荐阅读
- python - 函数中的 task.loop 没有显示任何错误,但也无法正常工作
- python - 将张量向量附加到张量矩阵
- python-3.x - Keras-Tuner 运行时错误
- c++ - 嵌套调用的线程安全
- java - 外键在springboot jpa中为null一对多
- python - 如何在不使用 hist() 函数的情况下创建值及其计数的直方图?
- pyspark - AttributeError:“BinaryLogisticRegressionSummary”对象没有属性“_jdf”
- java - JMS 会话创建失败
- python - Flask SocketIO:如何从后台任务发送消息
- javascript - 向上滚动到某个点