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

Question

In the following simple html code, when screen reader (NVDA, VoiceOver on mac) is on.在以下简单的 html 代码中，当屏幕阅读器（NVDA，Mac 上的 VoiceOver）打开时。

When I tab into the input box, it will announce This is the test label (visible on the web page)当我进入输入框时，它会显示This is the test label （在 web 页面上可见）

I want to let the screen reader to announce something extra like if you type something, more fields will appear .我想让屏幕阅读器宣布一些额外的东西，比如if you type something, more fields will appear 。 (hidden on the web page) （隐藏在 web 页面上）

Wonder how do I achieve it?想知道我如何实现它？

<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>

Answer 1

Visually Hidden Text视觉隐藏的文本

You want visually hidden / screen reader only text.您只需要视觉隐藏/屏幕阅读器的文本。 This can be achieved with the CSS class located in the snippet below and then applying that class to a <span> within the label.这可以通过<span> class 来实现

It will be announced to screen readers but not visible.它将向屏幕阅读器宣布，但不可见。

 .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" />

A better way更好的方法

In this instance I would question whether this should be visually hidden text.在这种情况下，我会质疑这是否应该是视觉上隐藏的文本。

With the example given of "if you type something, more fields will appear" that is information that is useful to everyone.以“如果您键入内容，将出现更多字段”为例，这是对每个人都有用的信息。 It is especially useful to people with cognitive disabilities or an anxiety disorder as pre-warning about changes helps them not get confused / prepare for the change so it is not unexpected.它对有认知障碍或焦虑症的人特别有用，因为对变化的预警有助于他们不会感到困惑/为变化做好准备，所以这并不意外。

I would suggest instead having an instructions section at the start of the form or above the particular input that explains this to everyone.我建议在表格的开头或在向所有人解释这一点的特定输入上方设置一个说明部分。

We can then link the input label and the instructions to the input using aria-labelledby="id1 id2" and giving the label and instructions an ID.然后，我们可以使用aria-labelledby="id1 id2"将输入 label 和指令链接到输入，并为 label 和指令提供 ID。

You must keep the for="" on the label as a backup / so the label is correctly linked to the input, allowing you to click the label to focus the input if you desire.您必须保留 label 上的for=""作为备份 / 以便 label 正确链接到输入，如果您愿意，可以单击 label 以聚焦输入。

The below is a rough example, you would have to use your judgement as to what works for your use case but it should give you the idea.下面是一个粗略的例子，你必须根据你的判断来判断什么对你的用例有用，但它应该会给你这个想法。

 #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"/>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-18 06:42:52

Visually Hidden Text视觉隐藏的文本

A better way更好的方法

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-18 06:42:52

Visually Hidden Text视觉隐藏的文本

A better way更好的方法

解决方案1
0 已采纳 2020-06-18 06:42:52