可访问性 p 为屏幕阅读器标记不同的文本

Question

对于 p 标签，我需要屏幕阅读器读取的文本与 p 标签中包含的文本不同。我需要人类看到“乔丹”和屏幕阅读器阅读“迈克尔乔丹”。这些在带有 swiper.js 的响应式网格中。添加标题不起作用。我怎样才能让它工作？ （我可以使用不同的 HTML 标记和属性来获得相同的效果。）

<p role="title" title="Michael Jordan">Jordan</p>

Answer 1

可访问性的黄金法则是尽可能为非屏幕阅读器用户提供与屏幕阅读器用户相似的体验，因此应谨慎使用以下技术。

话虽如此，有时上下文等可能很重要，您需要向屏幕阅读器提供额外信息。

有很多方法可以做到这一点：

1。 aria-label

如果你给一个元素一个aria-label 它的内容会被覆盖。但是这个doesn't have perfect support，尤其是在没有角色的段落和div等元素上。

<p aria-label="Michael Jordan">Jordan</p>

更新aria-label 的用法以清晰明了

正如cmets中指出的那样，我并不清楚上面的内容。

希望这更清楚，我很抱歉：

屏幕阅读器将忽略段落、div 等上的aria-label，除非他们有一个覆盖其语义含义的role。

例如：

<p aria-label="Michael Jordan" role="heading">Jordan</p> 可以工作，而我上面给出的示例则不能，纯粹是为了说明aria-label 的用法。

2。视觉隐藏文本

向屏幕阅读器用户提供额外信息的一种更可靠的方法是使用visually hidden text。

.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 属性，现在它基本上没用了，因为触摸设备无法访问它，键盘用户从未看到它，而且很多屏幕阅读器都忽略了它，通常建议是不要使用它。

最后的想法

另外请注意，对于通过鼠标导航的屏幕阅读器用户（即使用屏幕阅读器来帮助理解的人），上述两种技术都不太可能改变他们在鼠标悬停时听到的内容。

因此，如果您可以重新设计界面以容纳额外的文字，那么最好使用完整的文字。这样做也消除了对任何额外标记的需要，因此也是首选。

<p>Michael Jordan</p>.