HTML aria-label 属性是否允许为空字符串？

Question

屏幕阅读器会忽略空字符串吗？或者如果字符串为空，我应该避免将它们添加到元素中吗？

作为参考，这是 React 中的一个用例，您希望默认为空字符串以避免检查未定义：

<input
  id={id}
  value={value}
  {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
/>

Answer 1

我在规范中看不到任何关于如果

aria-label

设置为空字符串会发生什么的内容。我认为您只需将其标记为空，这样就可以了，但我可以想象屏幕阅读器会认为这是一个错误并回退到其他内容。

我认为如果

aria-label

有时可以为空，那么你使用的是错误的。

aria-label

只是

<label>

元素的替代品。它应该命名输入元素。不应该出现名称改变或者可以为空的情况。

Answer 2

w3 的文档没有提及

aria-label

的空属性值。所以它可能是不同屏幕阅读器软件的实现定义。

参考：https://www.w3.org/TR/wai-aria/#aria-label

Answer 3

绝对应该避免

空

aria-label

，因为它可能会导致屏幕阅读器做出不可预测的事情。虽然这不是 WCAG 明确禁止的事情，但可能会被视为违反 WCAG 准则 4.1：

“最大限度地提高与当前和未来用户代理的兼容性，包括辅助技术。”

空

aria-label

没有任何作用，在代码中引入了缺陷，并且是懒惰编程的标志。

Answer 4

我们还在考虑空的咏叹调标签，特别是对于盲文或屏幕阅读器无用的链接。我们想要得到的结果是不要提及屏幕阅读器中的链接，因为它们对于这些使用屏幕阅读器的人来说毫无用处。

你觉得怎么样？在我们的例子中，我们讨论的是页面上的 4 个按钮，它们可以更改页面的颜色设置。当使用屏幕阅读器的人必须阅读页面上的不同颜色选项时，他们不会很烦吗？我们希望节省他们的时间，而不是将其浪费在对他们没有价值的信息上。