WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding the Phone number format announcement to screen reader user

for

From: Lucy GRECO
Date: Mar 21, 2023 11:24AM

hello
I NEVER WANT YOU TO HID HIDE SOME THING FROM THE SCREENREADER USER THAT
OTHERS CAN SEE. IF ITS THERE I NEED TO KNOW IT


Berkeley IT <https://technology.berkeley.edu/home>

Lucy Greco, Web Accessibility Evangelist

Campus IT Experience
Phone: (510) 289-6008 | Email: <EMAIL REMOVED> |
https://webaccess.berkeley.edu Follow me on twitter @accessaces

We champion diversity. We act with integrity. We deliver. We innovate.



On Tue, Mar 21, 2023 at 10:17 AM Sudheer Babu < <EMAIL REMOVED> > wrote:

> 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
> > > > >