如何让屏幕阅读器宣布额外的文字答案

【问题标题】：How to let screen reader to announce extra text如何让屏幕阅读器宣布额外的文字
【发布时间】：2020-10-07 23:46:30
【问题描述】：

在以下简单的 html 代码中，当屏幕阅读器（NVDA，Mac 上的 VoiceOver）打开时。

当我进入输入框时，它会宣布This is the test label（在网页上可见）

我想让屏幕阅读器宣布一些额外的内容，例如 if you type something, more fields will appear。（隐藏在网页上）

想知道如何实现它？

<html>
  <head>
    test
  </head>
  <body>
    <label class="large-label" for="your-name">
      This is the test label
    </label>
    <input id="your-name" name="your-name" type="text" />
  </body>
</html>

【问题讨论】：

标签： html accessibility screen-readers nvda

【解决方案1】：

视觉上隐藏的文字

您想要视觉上隐藏/仅屏幕阅读器的文本。这可以通过位于下面 sn-p 中的 CSS 类来实现，然后将该类应用于标签内的 <span>。

它将向屏幕阅读器宣布，但不可见。

.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 */
}

    <label class="large-label" for="your-name">
      This is the test label <span class="visually-hidden">if you type something, more fields will appear</span>
    </label>
    <input id="your-name" name="your-name" type="text" />

更好的方法

在这种情况下，我会质疑这是否应该是视觉隐藏的文本。

以“如果您键入内容，将出现更多字段”为例，这是对每个人都有用的信息。它对有认知障碍或焦虑症的人特别有用，因为对变化的预警有助于他们不会感到困惑/为变化做好准备，因此不会出乎意料。

我建议在表格的开头或在向所有人解释这一点的特定输入上方设置一个说明部分。

然后我们可以使用aria-labelledby="id1 id2" 将输入标签和指令链接到输入，并为标签和指令提供一个ID。

您必须保留标签上的for="" 作为备份 / 以便标签正确链接到输入，如果需要，您可以单击标签以聚焦输入。

以下是一个粗略的示例，您必须根据自己的判断来判断什么对您的用例有效，但它应该会给您一个想法。

#hint{
 width: 90%;
 padding: 5%;
 background-color: #333;
 color: #fff;
 font-size: 1.3rem;
}

<p id="hint">If you type something, more fields will appear</p>

<label class="large-label" for="your-name" id="your-name-label">
      This is the test label
 </label>   
    <input id="your-name" name="your-name" type="text" aria-labelledby="your-name-label hint"/>

【讨论】：