Manivannan Manivannan - 1 year ago 165
HTML Question

How to solve material design input field placeholder screen reader issue with Firefox?

I am using material design with floating label for the input field.
There is some scenario to use placeholder text for announcing extra details to the user. For the inactive/blurred text field I can not add the placeholder (label and placeholder text will overlap each other) so I toggle placeholder text on input field focus in/out.

It's working fine in JAWS along with Chrome, announcing:

<label> <placeholdertext>

But with Firefox it is announcing only
and placeholder is missed out as it's being added dynamically.

Is there any fix available for this situation?

I am assuming if there is no fix, I may need to add the placeholder text along with label and there could be spacing issues in the future.

Label text - Input tex…

Answer Source

This issue is resolved by toggling title along with placeholder attr. now screen reader on both browsers(FF & chrome) announces <label> + <title> and placeholder attr is ignored. this solved accessibility issue with placeholder issue on FF browser.


aria-describedby attribute is added on input field and assigned value as id-value of same input field. so this way screen reader announces <aria-describedby> + placeholder, and aria-describedby is pointing to label value indirectly as input tag's id-attr is pointing to label's for-attr. this works similar in chrome and FF

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download