E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Sudheer Babu
Date: Tue, Mar 21 2023 11:16AM
Subject: Hiding the Phone number format announcement to screen reader user
No previous message | Next message →

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

From: Lucy GRECO
Date: Tue, Mar 21 2023 11:24AM
Subject: Re: Hiding the Phone number format announcement to screen reader user
← Previous message | Next message →

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

From: Sudheer Babu
Date: Tue, Mar 21 2023 11:28AM
Subject: Re: Hiding the Phone number format announcement to screen reader user
← Previous message | Next message →

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

From: Joshua Hori
Date: Tue, Mar 21 2023 12:11PM
Subject: Re: Hiding the Phone number format announcement to screen reader user
← Previous message | No next message

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 ADDRESS REMOVED = > on behalf of Sudheer Babu < = EMAIL ADDRESS REMOVED = >
Date: Tuesday, March 21, 2023 at 10:28 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
> > > > > > > > > >
> > > > >