Html 禁用所有辅助功能API（屏幕阅读器）读取的占位符文本

有些屏幕阅读器读取占位符值，有些则不读取。是否有一种方法可以禁止所有屏幕阅读器读取占位符值（在HTML输入的上下文中）。尤其是IOS屏幕阅读器读取占位符值，在这种情况下，相同的信息重复两次

我想要的是为屏幕用户显示占位符，为屏幕阅读器用户显示隐藏标签

---

编辑：当我问这个问题时，这是第一次研究可访问性，只是为了解决一个问题。在进一步的研究中，我发现我们可以使用一个隐藏的标签，并将其与用于属性的输入元素相关联。这里是w3文档。

如果您真的想获得创造性，理论上可以使用JS来管理占位符属性。这会在一定程度上降低页面的加载速度，但是您可以在输入接收到焦点时删除占位符属性，并在输入失去焦点时重新添加它。这将导致禁用辅助技术的占位符属性（至少在交互式表单模式下）。有视力的游客可能不会注意到这一区别。这是一个例子。我在NVDA/Chrome上进行了测试，效果很好，但我不能用任何其他的屏幕阅读器/浏览器组合

// on document load, add the placeholder text
document.addEventListener("DOMContentLoaded", function(){
   myInput.setAttribute("placeholder", myPlaceholder)
});

// when receiving focus, remove the placeholder text
myInput.addEventListener('focus', (event) => {
    myInput.removeAttribute("placeholder");
});

// when losing focus, re-add the placeholder text
myInput.addEventListener('blur', (event) => {
   myInput.setAttribute("placeholder", myPlaceholder)
});

正如其他人所说，使用占位符并不适合替代标签。如果您确实不喜欢标签的外观，可以继续使用占位符。缺点是一些屏幕阅读器可能会同时读取标签和占位符，这并不理想，但过度描述要比欠描述好。我个人认为，如果某些内容只在某些浏览器/屏幕阅读器组合上出现，并且我的代码在其他方面是有效的，并且符合WCAG的要求，则可以将其读取两次。

根据

同样，如果附近没有任何其他文本字符串（如前一列表中所述），则如果输入包含占位符文本，则此类文本可能是名称标签的候选文本。这通过可访问名称计算（稍后讨论）和实际意义都得到了支持，即在不提供可见标签的情况下，语音输入用户可能会尝试使用占位符文本值作为与输入交互的手段

只要不提供可视标签，占位符文本就会被辅助技术（例如语音输入）使用。禁用输入辅助以提供更多用户体验，而禁用输出辅助会适得其反

---

当字段为空时，您完全可以使用模拟占位符行为的可视标签（有适当的预防措施，使字段在字段填充后可通过输入帮助使用）。

如我在问题中所述的我的要求

我想要的是显示屏幕用户的占位符和隐藏标签 适用于屏幕阅读器用户。

最好的方法是添加一个隐藏标签，并将输入元素与相应标签的属性相关联

<label for="search" class="visuallyhidden">Search: </label>
<input type="text" name="search" id="search" placeholder>
<button type="submit">Search</button>
.visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

---

你可以跟着。这确实值得一看文档。

占位符

不是标签的替代品。使用标签。@在不鼓励的情况下，使用WCAG并授权使用占位符，说明标签不是在编程意义上使用的，而只是指在视觉上接近组件的文本字符串。这个问题需要更多的注意。@Quentin我要求你在否决/评论之前仔细阅读描述。我在描述中明确提到“我想为屏幕用户显示占位符，为屏幕阅读器用户显示隐藏标签”。你本可以提供很多有用的评论/答案。另外，我请求你建议我是否可以给这个问题一个更好的标题。谢谢你的回答。我不想得到什么特别的东西。“我想要的是为屏幕用户显示占位符，为屏幕阅读器用户显示隐藏标签”，正如我在问题中所解释的，在进一步挖掘时，我发现这可以通过添加隐藏标签来实现，并将其与相应输入的for属性相关联。谢谢。我以为你的问题是为了“一种可以对所有屏幕阅读器禁用读取占位符值的方法”。我相信我的解决方案解决了这一任务。我不确定当大多数屏幕阅读器用户都是非视力访客时，“为屏幕用户显示占位符”意味着什么。这很有见地。谢谢。此处引用的同一段还指出”请注意，输入字段中的占位符文本不被视为提供标签的适当方式。HTML5规范规定“占位符属性不应用作

的替代项”“。据我所知，并非所有屏幕阅读器/浏览器组合都支持

占位符

属性。@Josh是的，这正是我要问的问题。我建议的占位符模拟回答了这个问题，并解决了输入和输出辅助的任何问题。@Adam-也许我误解了你的答案。在我看来，你是说可以使用

占位符

属性来标记输入字段，而辅助技术将使用该

占位符

，就像它是

元素一样。我遗漏了什么吗？@Josh No这是完全相反的方法：使用语音输入辅助的用户应该能够使用可视标签（即使唯一的可视标签是占位符文本）。因此，使用可访问的标签模拟

占位符

行为是比使用本机

占位符

属性更好的解决方案，本机

占位符

属性的支持率较低，并且在字段不为空时不再可见。

<label style={{display: 'none'}} for="search"> Search: </label>