可访问性 p 标记屏幕的不同文本 reader
accessibility p tag different text for screen reader
对于 p 标签，我需要屏幕 reader 读取的文本与 p 标签中包含的文本不同。我需要人类看到“Jordan”，屏幕 reader 才能阅读“Michael Jordan”。这些位于 swiper.js 的响应式网格中。添加标题不起作用。我如何让它工作？ （我可以使用不同的 HTML 标签和属性来获得相同的效果。）
<p role="title" title="Michael Jordan">Jordan</p>
可访问性的黄金法则是尽可能向非屏幕 reader 用户提供与屏幕 reader 用户相似的体验，因此应谨慎使用以下技术。
话虽这么说，但有时上下文等可能很重要，您需要向屏幕 readers 提供额外信息。
有很多方法可以做到这一点：
1。 aria-label
如果你给一个元素一个aria-label它的内容被覆盖。但是这个doesn't have perfect support，尤其是在没有角色的段落和div等元素上
<p aria-label="Michael Jordan">Jordan</p>
为清楚起见更新aria-label用法
上面评论里说的我没说清楚
希望这更清楚，我很抱歉：
屏幕 readers 将忽略段落、div 等上的 aria-label，除非它们具有覆盖其语义的 role。
例如：
<p aria-label="Michael Jordan" role="heading">Jordan</p> 会起作用，而我上面给出的例子不会，纯粹是为了说明 aria-label 用法。
2。视觉隐藏文本
向筛选 reader 用户提供额外信息的一种更可靠的方法是使用 .
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<p><span class="visually-hidden">Michael </span>Jordan</p>
其他重要信息
据我所知，没有 role="title" 这样的东西 - 我假设你的意思是 role="heading" - 此时只需使用 <h1> 到 <h6>.
我从两个示例中删除了 title 属性，现在它基本上没用了，因为触摸设备无法访问它，键盘用户永远看不到它并且它被很多屏幕忽略 readers，通常建议不要使用它。
最后的想法
另请注意，对于通过鼠标导航的屏幕 reader 用户（即使用屏幕 reader 来帮助理解的人），上述两种技术都不太可能改变他们听到的内容当他们将鼠标悬停时。
因此，如果您可以重新设计界面以容纳额外的文本，那么拥有完整的文字会更好。这样做也消除了对任何额外标记的需要，因此是首选。
<p>Michael Jordan</p>.
对于 p 标签，我需要屏幕 reader 读取的文本与 p 标签中包含的文本不同。我需要人类看到“Jordan”，屏幕 reader 才能阅读“Michael Jordan”。这些位于 swiper.js 的响应式网格中。添加标题不起作用。我如何让它工作？ （我可以使用不同的 HTML 标签和属性来获得相同的效果。）
<p role="title" title="Michael Jordan">Jordan</p>
可访问性的黄金法则是尽可能向非屏幕 reader 用户提供与屏幕 reader 用户相似的体验，因此应谨慎使用以下技术。
话虽这么说，但有时上下文等可能很重要，您需要向屏幕 readers 提供额外信息。
有很多方法可以做到这一点：
1。 aria-label
如果你给一个元素一个aria-label它的内容被覆盖。但是这个doesn't have perfect support，尤其是在没有角色的段落和div等元素上
<p aria-label="Michael Jordan">Jordan</p>
为清楚起见更新aria-label用法
上面评论里说的我没说清楚
希望这更清楚，我很抱歉：
屏幕 readers 将忽略段落、div 等上的 aria-label，除非它们具有覆盖其语义的 role。
例如：
<p aria-label="Michael Jordan" role="heading">Jordan</p> 会起作用，而我上面给出的例子不会，纯粹是为了说明 aria-label 用法。
2。视觉隐藏文本
向筛选 reader 用户提供额外信息的一种更可靠的方法是使用
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<p><span class="visually-hidden">Michael </span>Jordan</p>
其他重要信息
据我所知，没有 role="title" 这样的东西 - 我假设你的意思是 role="heading" - 此时只需使用 <h1> 到 <h6>.
我从两个示例中删除了 title 属性，现在它基本上没用了，因为触摸设备无法访问它，键盘用户永远看不到它并且它被很多屏幕忽略 readers，通常建议不要使用它。
最后的想法
另请注意，对于通过鼠标导航的屏幕 reader 用户（即使用屏幕 reader 来帮助理解的人），上述两种技术都不太可能改变他们听到的内容当他们将鼠标悬停时。
因此，如果您可以重新设计界面以容纳额外的文本，那么拥有完整的文字会更好。这样做也消除了对任何额外标记的需要，因此是首选。
<p>Michael Jordan</p>.