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

Question

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

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

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

Answer 1

根据 理解成功标准2.5.3：名称中的Label

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

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

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

Answer 2

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

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

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

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

此外，您可以简单地隐藏 label 应用样式为display: none 。

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

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

Answer 3

如果你真的想发挥创意，理论上你可以使用 JS 来管理占位符属性。 它会稍微减慢页面的加载速度，但是您可以在输入获得焦点时删除占位符属性，并在输入失去焦点时重新添加它。 这将具有禁用辅助技术的占位符属性的效果（至少在交互式 forms 模式下）。 有视力的游客可能不会注意到差异。 这是 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 或使用剪辑技术并继续使用占位符。 缺点是一些屏幕阅读器可能会同时阅读 label 和占位符，这并不理想，但过度描述总比描述不足好。 如果某些内容仅出现在某些浏览器/屏幕阅读器组合上，我个人会同意阅读两次，并且我的代码在其他方面有效并符合 WCAG 要求。