WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Joshua Hori
Date: Mar 21, 2023 12:11PM

Hello Sudheer,

Label the form fields correctly (area code, phone number). The screenreader gives the user the ability to change their reading verbosity to announce/not-announce characters. So you don't have to worry about the parathesis or dash annoying a screenreader user.

There's no reason to use an ARIA label on a form field since they can be made accessible with HTML. ARIA is only seen by screenreaders and doesn't help those who use dictation, so should be used sparingly. ARIA instructions, on the other hand, are like toast pop ups for screenreaders and should be used everywhere.

~ Joshua

From: WebAIM-Forum < <EMAIL REMOVED> > on behalf of Sudheer Babu < <EMAIL REMOVED> >
Date: Tuesday, March 21, 2023 at 10:28 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Hiding the Phone number format announcement to screen reader user
Only concern here was that announcement of all the paranthesis and
underscores might be annoying to the screen reader user and not to hide.

On Tue, 21 Mar, 2023, 10:55 pm Lucy GRECO, < <EMAIL REMOVED> > wrote:

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