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

Question

我在输入字段中使用带有浮动标签的材料设计。 在某些情况下，可以使用占位符文本向用户宣布其他详细信息。 对于非活动/模糊的文本字段，我无法添加占位符（标签和占位符文本将彼此重叠），因此我在输入字段焦点上/下切换占位符文本。

在JAWS和Chrome中正常运行，并宣布： <label> <placeholdertext>

但是，使用Firefox时，它仅发布<label>并且由于动态添加占位符而被漏掉了。

有没有针对这种情况的修复程序？

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

Answer 1

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

（要么）

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