禁用所有可访问性 API（屏幕阅读器）读取的占位符文本

Question

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

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

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

Answer 1

根据Understanding Success Criterion 2.5.3: Label in Name

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

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

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

Answer 2

对于我在问题中提到的要求

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

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

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

另外，您可以简单地将标签应用样式隐藏为display: none。

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

您可以关注w3.org document。真的值得一看文档。

Answer 3

如果你真的想发挥创意，理论上你可以使用 JS 来管理占位符属性。它会稍微减慢页面的加载速度，但是您可以在输入获得焦点时删除占位符属性，并在输入失去焦点时重新添加它。这将具有禁用辅助技术的占位符属性的效果（至少在交互式表单模式下）。有视力的游客可能不会注意到差异。这是example in a fiddle。我在 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)
});

正如其他人所说，使用占位符不是使用标签的合适替代品。如果您真的不喜欢标签的外观，您可以position them off-screen or use the clip technique 并继续使用占位符。缺点是一些屏幕阅读器可能会同时阅读标签和占位符，这并不理想，但过度描述总比描述不足好。如果某些内容仅出现在某些浏览器/屏幕阅读器组合上，我个人会同意阅读两次，并且我的代码在其他方面有效并符合 WCAG 要求。