我使用带有浮动标签的材料设计作为输入字段 . 有一些场景使用占位符文本向用户宣布额外的详细信息 . 对于非活动/模糊文本字段,我无法添加占位符(标签和占位符文本将相互重叠),因此我在输入字段焦点输入/输出切换占位符文本 .
它与Chrome一起在JAWS中运行良好,宣布: <label> <placeholdertext>
但是对于Firefox,它只宣布 <label>
并且因为它是动态添加而错过了占位符 .
这种情况有什么问题吗?
我假设如果没有修复,我可能需要添加占位符文本和标签,并且将来可能存在间距问题 .
1 回答
通过切换
title
和placeholder
attr解决此问题 . 现在两个浏览器上的屏幕阅读器(FF和chrome)宣布<label> + <title>
和placeholder
attr被忽略 . 这解决了FF浏览器占位符问题的可访问性问题 .(要么)
aria-describedby属性被添加到输入字段并被赋值为相同输入字段的id值 . 所以这种方式屏幕阅读器宣布
<aria-describedby> + placeholder
,并且aria-describedby间接指向标签值作为输入标签's id-attr is pointing to label' s for-attr . 这与chrome和FF类似