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

Posted 2023-03-05

【中文标题】如何解决 Firefox 的材料设计输入字段占位符屏幕阅读器问题？

【英文标题】：How to solve material design input field placeholder screen reader issue with Firefox?

【发布时间】：2016-03-25 07:45:57

【问题描述】：

我正在为输入字段使用带有浮动标签的材料设计。 有一些场景可以使用占位符文本向用户宣布额外的细节。对于非活动/模糊文本字段，我无法添加占位符（标签和占位符文本将相互重叠），因此我在输入字段焦点上切换占位符文本。

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

但是对于 Firefox，它只宣布 <label> 并且由于它是动态添加的而错过了占位符。

对于这种情况有什么可用的修复方法吗？

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

【问题讨论】：

我记得几年前在使用占位符文本时遇到了问题 - 有些浏览器将其隐藏在焦点事件中，但有些则等待按键事件。难道是这个阻止了 Firefox 发布它？

感谢@Tokn 的写作，尝试按下一些字符，但仍然没有宣布占位符文本。附加说明，我正在为文本字段的焦点事件添加占位符属性。

那么，如果您硬编码了占位符文本，Firefox 上的 JAWS 是否会正确宣布占位符文本？如果是这样，那么问题在于您将属性添加到焦点上，我猜该字段的屏幕阅读器事件是在您的占位符被填充之前触发的。

哦，感谢您的提示，当与 for attr 有正确的标签关联时，观察到的占位符不会被读取。所以这不是因为占位符属性切换。

【参考方案1】：

通过切换title 和placeholder attr 可以解决此问题。现在两种浏览器（FF 和 chrome）上的屏幕阅读器都宣布 <label> + <title> 和 placeholder attr 被忽略。这解决了 FF 浏览器上占位符问题的可访问性问题。

（或）

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