我可以删除屏幕阅读器提示并保留占位符文本吗

Question

我正在与谷歌浏览器屏幕阅读器一起进行调查。 我注意到占位符值呈现为“提示，输入您的姓名”。

所以屏幕阅读器说。 “输入你的名字，提示输入你的名字”

屏幕阅读器已经在阅读标签，所以我的问题是，这个占位符提示似乎是多余的。 我可以在保留占位符文本的同时删除屏幕阅读器提示吗？

<fieldset class="about">
          <legend>About you</legend>
          <label id="name-label" for="name">Enter your name</label>
          <input id="name" name="name" type="text" placeholder="enter your name">
          <label id="email-label" for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="Enter your email">
          <label id="age-label" for="number">Age</label>
          <input id="number" name="number" type="number min="10" max="100" placeholder="Age">
</fieldset>

我尝试在屏幕阅读器选项上使用 display: none ，但是输入不可聚焦。 还有其他选择吗？

<form id="survey-form">
    <fieldset class="Enter your name">
      <legend>Enter Your name</legend>
      <label id="name-vis" for="name-vis"></label>
      <input id="name-vis" name="name" type="text" placeholder="enter your name" aria-hidden="true">
      <label id="name-read" for="name-read">Enter your name</label>
      <input id="name-read" name="name" type="text">
    </fieldset>
</form>

谢谢你的帮助

Answer 1

可以有多种方法，使用 aria-label 和 aria-labelledby 以及 aria descriptionby

尝试使用 aria-label 应该可以

<form id="survey-form">
        <fieldset class="Enter your name">
          <legend>Enter Your name</legend>
          <label id="name-vis-label" for="name-vis"></label>
// added aria-label for input element
          <input id="name-vis" aria-label="Enter your name" name="name" type="text" placeholder="enter your name">
        </fieldset>
    </form>

Answer 2

该特定屏幕阅读器（chromevox）正在添加“提示”一词。 JAWS、NVDA 和 VoiceOver 都没有说“提示”。

确保您了解“可访问名称”和“可访问描述”之间的区别。 我在这两个答案中谈到了这两个概念：

• 为文本框指定屏幕阅读器通知
• 当使用语义 HTML 制作 <table> 时，我可以使用 <h1> 和 aria-describedby 而不是 <caption> 吗？

在“可访问名称计算”中使用placeholder属性来计算“可访问描述”。 正如我在前两个答案中所指出的，屏幕阅读器将宣布元素的“可访问名称”，然后是“可访问描述”。 使用 chromevox，听起来像是添加了“带提示”，即使它不是您元素的一部分。 我不会试图摆弄屏幕阅读器如何宣布事情。

但是回到您的原始代码，我发现占位符与标签的文本相同有点奇怪。 重复文本对用户有何帮助？ 占位符的规范说：

“占位符属性表示旨在帮助用户输入数据的简短提示（单词或短语）”

有趣的是，规范说占位符是一个“提示”，而 chromevox 在宣布它时会注入“提示”。