WebAIM - Web Accessibility In Mind

E-mail List Archives

Hiding the Phone number format announcement to screen reader user

for

From: Sudheer Babu
Date: Mar 21, 2023 11:16AM

Hello All,

We have a screen where there is a phone number field which has a
placeholder which shows the format of the phone number eg: (___) -
(________). This shows up when the user tabs into that field.
The phone number entered gets auto formatted, so there's no need to get
this formatting announced to the screen reader user.

On DOM, this shows up when I enable #shadow-root(user-agent) only while
inspecting.

I would appreciate if someone has encountered the same and has a fix for it
already or can suggest a fix.

<input name="$phAdmPhone_phone" type="text" maxlength="15"
id="AdmPhone_phone" class="form-controlxx " aria-label=" Phone Number"
data-parsley-required-message="Phone Number is required"
data-parsley-required="true" data-id="phAdmPhone_phone" maskphone="true"
aria-required="true" style="width:200px;">
#shadow-root(user-agent)
<div>(___) ___-____</div>

Adding "Aria-hidden" on the input tag is causing obvious screen reader
issues for the field.

Thanks in advance

Sudheer