E-mail List Archives
Thread: Hiding text, but still use it for
Number of posts in this thread: 8 (In chronological order)
From: JP Jamous
Date: Fri, Oct 12 2018 9:46AM
Subject: Hiding text, but still use it for
No previous message | Next message →
Hi folks,
I have a form with an alert text after the submit button in the DOM. I would
like to make that alert text announceable once the user sets focus on the
submit button. No problem, I achieved the goal with
aria-labelledby="alert-message button-id". Both JAWS and NVDA announce the
message followed by "Submit button."
The only issue is if the user is down-arrowing, the alert message is spoken
followed by "submit button." Then if the user down-arrows again the alert
message is spoken because it is located in the DOM right after the submit
button outside the <form>.
I cannot move the alert message to be in the DOM prior to the Submit button.
UX will push back hard on this.
How can I prevent both JAWS and NVDA from speaking the alert message as the
user is down-arrowing?
I want to prevent the following announcement:
"Database records are uploaded frequently. Submit Button."
"Database records are uploaded frequently."
The alert message is located in a p tag housed inside a div.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
<mailto: = EMAIL ADDRESS REMOVED = > E-Mail Me | <http://linkedin.com/in/JPJamous>; Join
My LinkedIn Network
--------------------
From: Jared Smith
Date: Fri, Oct 12 2018 10:02AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
JP Jamous wrote:
> How can I prevent both JAWS and NVDA from speaking the alert message as the
> user is down-arrowing?
If it is visible in the page, you could give it aria-hidden="true".
If it is visibly hidden, then give it display:none with CSS (rather
than off-screen or clip or something else).
In both of these cases the screen reader should still read the message
in conjunction with the button, but should not read it when
encountered within the page (whether visible or not).
Jared
From: JP Jamous
Date: Fri, Oct 12 2018 10:58AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that. Once I
landed on the button, it stated "Submit button". Yet, in Firefox using JAWS
and NVDA, they both honored it. That was why I was wondering if there is a
different way of handling it.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Jared
Smith
Sent: Friday, October 12, 2018 11:02 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Hiding text, but still use it for
JP Jamous wrote:
> How can I prevent both JAWS and NVDA from speaking the alert message
> as the user is down-arrowing?
If it is visible in the page, you could give it aria-hidden="true".
If it is visibly hidden, then give it display:none with CSS (rather than
off-screen or clip or something else).
In both of these cases the screen reader should still read the message in
conjunction with the button, but should not read it when encountered within
the page (whether visible or not).
Jared
http://webaim.org/discussion/archives
From: Birkir R. Gunnarsson
Date: Fri, Oct 12 2018 11:35AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
How about instead of aria-labelledby use aria-describedby
aria-describedby is anounced by screen readers when users focus a
button with the tab key but generally not when they down arrow in
browse mode.
On 10/12/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that. Once
> I
> landed on the button, it stated "Submit button". Yet, in Firefox using JAWS
> and NVDA, they both honored it. That was why I was wondering if there is a
> different way of handling it.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jared
> Smith
> Sent: Friday, October 12, 2018 11:02 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Hiding text, but still use it for
>
> JP Jamous wrote:
>
>> How can I prevent both JAWS and NVDA from speaking the alert message
>> as the user is down-arrowing?
>
> If it is visible in the page, you could give it aria-hidden="true".
>
> If it is visibly hidden, then give it display:none with CSS (rather than
> off-screen or clip or something else).
>
> In both of these cases the screen reader should still read the message in
> conjunction with the button, but should not read it when encountered within
> the page (whether visible or not).
>
> Jared
> > > http://webaim.org/discussion/archives
> >
> > > > >
--
Work hard. Have fun. Make history.
From: JP Jamous
Date: Fri, Oct 12 2018 11:54AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
I will give it a try. Thank you Birkir.
--------------------
JP Jamous
Senior Digital Accessibility Engineer
E-Mail Me |Join My LinkedIn Network
--------------------
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Birkir R. Gunnarsson
Sent: Friday, October 12, 2018 12:35 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Hiding text, but still use it for
How about instead of aria-labelledby use aria-describedby
aria-describedby is anounced by screen readers when users focus a button
with the tab key but generally not when they down arrow in browse mode.
On 10/12/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
> I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that.
> Once I landed on the button, it stated "Submit button". Yet, in
> Firefox using JAWS and NVDA, they both honored it. That was why I was
> wondering if there is a different way of handling it.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Jared Smith
> Sent: Friday, October 12, 2018 11:02 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Hiding text, but still use it for
>
> JP Jamous wrote:
>
>> How can I prevent both JAWS and NVDA from speaking the alert message
>> as the user is down-arrowing?
>
> If it is visible in the page, you could give it aria-hidden="true".
>
> If it is visibly hidden, then give it display:none with CSS (rather
> than off-screen or clip or something else).
>
> In both of these cases the screen reader should still read the message
> in conjunction with the button, but should not read it when
> encountered within the page (whether visible or not).
>
> Jared
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >
--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives
From: Jonathan C. Cohn
Date: Sat, Oct 13 2018 6:12AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
This sounds like a JAWS bugged to me. With IE JAWS had to do most of the work while in Firefox, the browser is deciding what to display.
Best wishes,
Jonathan Cohn
> On Oct 12, 2018, at 1:54 PM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>
> I will give it a try. Thank you Birkir.
>
>
>
> --------------------
> JP Jamous
> Senior Digital Accessibility Engineer
> E-Mail Me |Join My LinkedIn Network
> --------------------
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Friday, October 12, 2018 12:35 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Hiding text, but still use it for
>
> How about instead of aria-labelledby use aria-describedby
>
> aria-describedby is anounced by screen readers when users focus a button
> with the tab key but generally not when they down arrow in browse mode.
>
>
>> On 10/12/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>> I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that.
>> Once I landed on the button, it stated "Submit button". Yet, in
>> Firefox using JAWS and NVDA, they both honored it. That was why I was
>> wondering if there is a different way of handling it.
>>
>>
>>
>> --------------------
>> JP Jamous
>> Senior Digital Accessibility Engineer
>> E-Mail Me |Join My LinkedIn Network
>> --------------------
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Jared Smith
>> Sent: Friday, October 12, 2018 11:02 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Hiding text, but still use it for
>>
>> JP Jamous wrote:
>>
>>> How can I prevent both JAWS and NVDA from speaking the alert message
>>> as the user is down-arrowing?
>>
>> If it is visible in the page, you could give it aria-hidden="true".
>>
>> If it is visibly hidden, then give it display:none with CSS (rather
>> than off-screen or clip or something else).
>>
>> In both of these cases the screen reader should still read the message
>> in conjunction with the button, but should not read it when
>> encountered within the page (whether visible or not).
>>
>> Jared
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > http://webaim.org/discussion/archives
> >
> > > >
From: Isabel Holdsworth
Date: Mon, Oct 15 2018 6:35AM
Subject: Re: Hiding text, but still use it for
← Previous message | Next message →
If you were to move the message to before the Submit button in the
DOM, but use CSS to position it to wherever the designer wants it to
be, then use aria-describedby to link the two together, then if you're
using the screenreader's cursor you'll encounter the message before
the button and it won't be spoken twice because aria-describedby is
only spoken on focus. Then everybody is happy.
On 13/10/2018, Jonathan C. Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> This sounds like a JAWS bugged to me. With IE JAWS had to do most of the
> work while in Firefox, the browser is deciding what to display.
>
>
> Best wishes,
>
> Jonathan Cohn
>
>> On Oct 12, 2018, at 1:54 PM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> I will give it a try. Thank you Birkir.
>>
>>
>>
>> --------------------
>> JP Jamous
>> Senior Digital Accessibility Engineer
>> E-Mail Me |Join My LinkedIn Network
>> --------------------
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Friday, October 12, 2018 12:35 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Hiding text, but still use it for
>>
>> How about instead of aria-labelledby use aria-describedby
>>
>> aria-describedby is anounced by screen readers when users focus a button
>> with the tab key but generally not when they down arrow in browse mode.
>>
>>
>>> On 10/12/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>>> I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that.
>>> Once I landed on the button, it stated "Submit button". Yet, in
>>> Firefox using JAWS and NVDA, they both honored it. That was why I was
>>> wondering if there is a different way of handling it.
>>>
>>>
>>>
>>> --------------------
>>> JP Jamous
>>> Senior Digital Accessibility Engineer
>>> E-Mail Me |Join My LinkedIn Network
>>> --------------------
>>>
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>>> Jared Smith
>>> Sent: Friday, October 12, 2018 11:02 AM
>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>> Subject: Re: [WebAIM] Hiding text, but still use it for
>>>
>>> JP Jamous wrote:
>>>
>>>> How can I prevent both JAWS and NVDA from speaking the alert message
>>>> as the user is down-arrowing?
>>>
>>> If it is visible in the page, you could give it aria-hidden="true".
>>>
>>> If it is visibly hidden, then give it display:none with CSS (rather
>>> than off-screen or clip or something else).
>>>
>>> In both of these cases the screen reader should still read the message
>>> in conjunction with the button, but should not read it when
>>> encountered within the page (whether visible or not).
>>>
>>> Jared
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> at
>> http://webaim.org/discussion/archives
>> >>
>> >> >> >> > > > > >
From: Mohith BP
Date: Tue, Oct 16 2018 4:50AM
Subject: Re: Hiding text, but still use it for
← Previous message | No next message
HI JP,
I too suggest aria-describedby. aria-describedby text is read while
users use quick navigation in JAWS also.
Thanks & Regards,
Mohith B. P.
On 10/15/18, Isabel Holdsworth < = EMAIL ADDRESS REMOVED = > wrote:
> If you were to move the message to before the Submit button in the
> DOM, but use CSS to position it to wherever the designer wants it to
> be, then use aria-describedby to link the two together, then if you're
> using the screenreader's cursor you'll encounter the message before
> the button and it won't be spoken twice because aria-describedby is
> only spoken on focus. Then everybody is happy.
>
> On 13/10/2018, Jonathan C. Cohn < = EMAIL ADDRESS REMOVED = > wrote:
>> This sounds like a JAWS bugged to me. With IE JAWS had to do most of the
>> work while in Firefox, the browser is deciding what to display.
>>
>>
>> Best wishes,
>>
>> Jonathan Cohn
>>
>>> On Oct 12, 2018, at 1:54 PM, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>>>
>>> I will give it a try. Thank you Birkir.
>>>
>>>
>>>
>>> --------------------
>>> JP Jamous
>>> Senior Digital Accessibility Engineer
>>> E-Mail Me |Join My LinkedIn Network
>>> --------------------
>>>
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>>> Birkir R. Gunnarsson
>>> Sent: Friday, October 12, 2018 12:35 PM
>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>> Subject: Re: [WebAIM] Hiding text, but still use it for
>>>
>>> How about instead of aria-labelledby use aria-describedby
>>>
>>> aria-describedby is anounced by screen readers when users focus a button
>>> with the tab key but generally not when they down arrow in browse mode.
>>>
>>>
>>>> On 10/12/18, JP Jamous < = EMAIL ADDRESS REMOVED = > wrote:
>>>> I did use aria-hidden="true" Jared, but JAWS 2018 in IE11 broke that.
>>>> Once I landed on the button, it stated "Submit button". Yet, in
>>>> Firefox using JAWS and NVDA, they both honored it. That was why I was
>>>> wondering if there is a different way of handling it.
>>>>
>>>>
>>>>
>>>> --------------------
>>>> JP Jamous
>>>> Senior Digital Accessibility Engineer
>>>> E-Mail Me |Join My LinkedIn Network
>>>> --------------------
>>>>
>>>>
>>>> -----Original Message-----
>>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>>>> Jared Smith
>>>> Sent: Friday, October 12, 2018 11:02 AM
>>>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>>>> Subject: Re: [WebAIM] Hiding text, but still use it for
>>>>
>>>> JP Jamous wrote:
>>>>
>>>>> How can I prevent both JAWS and NVDA from speaking the alert message
>>>>> as the user is down-arrowing?
>>>>
>>>> If it is visible in the page, you could give it aria-hidden="true".
>>>>
>>>> If it is visibly hidden, then give it display:none with CSS (rather
>>>> than off-screen or clip or something else).
>>>>
>>>> In both of these cases the screen reader should still read the message
>>>> in conjunction with the button, but should not read it when
>>>> encountered within the page (whether visible or not).
>>>>
>>>> Jared
>>>> >>>> >>>> archives at http://webaim.org/discussion/archives
>>>> >>>>
>>>> >>>> >>>> archives at http://webaim.org/discussion/archives
>>>> >>>>
>>>
>>>
>>> --
>>> Work hard. Have fun. Make history.
>>> >>> >>> at
>>> http://webaim.org/discussion/archives
>>> >>>
>>> >>> >>> >>> >> >> >> >> >>
> > > > >