html - 如何解决 Firefox 的 Material 设计输入字段占位符屏幕阅读器问题？

Question

我正在为输入字段使用带有 float 标签的 Material 设计。有一些场景使用占位符文本来向用户宣布额外的细节。对于不活动/模糊的文本字段，我无法添加占位符(标签和占位符文本将相互重叠)，因此我在输入字段焦点输入/输出时切换占位符文本。

它在 JAWS 和 Chrome 中运行良好，宣布:<label> <placeholdertext>

但对于 Firefox，它只宣布 <label>和占位符被遗漏，因为它是动态添加的。

对于这种情况是否有可用的修复方法？

我假设如果没有修复，我可能需要添加占位符文本和标签，并且将来可能会出现间距问题。

Answer 1

此问题已通过切换 title 得到解决连同 placeholder属性。现在两种浏览器(FF 和 chrome)上的屏幕阅读器宣布 <label> + <title>和 placeholder属性被忽略。这解决了 FF 浏览器上占位符问题的可访问性问题。

(或)

aria-describedby 属性被添加到输入字段并赋值作为同一输入字段的 id-value。所以这样屏幕阅读器会宣布<aria-describedby> + placeholder ，并且 aria-describedby 间接指向标签值，因为输入标签的 id-attr 指向标签的 for-attr。这在 chrome 和 FF 中类似