WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Buttons not operable with 'Space/Enter' When Screen Reader is ON

for

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

From: Jeevan Reddy
Date: Wed, Jan 02 2019 10:45PM
Subject: Buttons not operable with 'Space/Enter' When Screen Reader is ON
No previous message | Next message →

Hi Friends,
Happy new year 2019 for all of You!.
some of the buttons in our application are not operable with 'Space/Enter'
when Screen Reader is On, but operable as expected when Screen Reader is
turned OFF.
we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
can you pls share some insights how to resolve this?

Your help is greatly appreciated!

!


--
Best Regards,
Jeevan Reddy,
Accessibility Consultant,
Infosys Ltd,
Bangalore, India.

From: glen walker
Date: Wed, Jan 02 2019 11:06PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

I'm guessing you're not using a real <button> element or <input
type="button">. Can you post the code you are using?

You tested NVDA on Chrome? What else have you tested? Does it work with
NVDA on Firefox? Does JAWS work?



On Wed, Jan 2, 2019 at 10:45 PM Jeevan Reddy < = EMAIL ADDRESS REMOVED = >
wrote:

> Hi Friends,
> Happy new year 2019 for all of You!.
> some of the buttons in our application are not operable with 'Space/Enter'
> when Screen Reader is On, but operable as expected when Screen Reader is
> turned OFF.
> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
> can you pls share some insights how to resolve this?
>
> Your help is greatly appreciated!
>
> !
>
>
> --
> Best Regards,
> Jeevan Reddy,
> Accessibility Consultant,
> Infosys Ltd,
> Bangalore, India.
> > > > >

From: Jonathan Cohn
Date: Thu, Jan 03 2019 7:41AM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

Also, if you are labeling the button with off screen text this can be an issue with NVDA. Use aria-label instead.
> On Jan 3, 2019, at 1:06 AM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> I'm guessing you're not using a real <button> element or <input
> type="button">. Can you post the code you are using?
>
> You tested NVDA on Chrome? What else have you tested? Does it work with
> NVDA on Firefox? Does JAWS work?
>
>
>
> On Wed, Jan 2, 2019 at 10:45 PM Jeevan Reddy < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Hi Friends,
>> Happy new year 2019 for all of You!.
>> some of the buttons in our application are not operable with 'Space/Enter'
>> when Screen Reader is On, but operable as expected when Screen Reader is
>> turned OFF.
>> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
>> can you pls share some insights how to resolve this?
>>
>> Your help is greatly appreciated!
>>
>> !
>>
>>
>> --
>> Best Regards,
>> Jeevan Reddy,
>> Accessibility Consultant,
>> Infosys Ltd,
>> Bangalore, India.
>> >> >> >> >>
> > > >

From: Birkir R. Gunnarsson
Date: Thu, Jan 03 2019 8:31AM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

If these are synthetic buttons that only work with onkeyboard
listeners, they would fail when a screen reader is running.
In browse mode, the typical screen reader mode for exploring a page,
when the user finds a button element and presses enter or spacebar the
screen reader sends an onclick event with the screen coordinates to
the browser (it is as if the user had clicked on that location on the
screen with the mouse), the screen reader does not send a keyboard
event.
So if these buttons do not have an onclick listener, (maybe the
onclick listener is on the parent element or something) the buttons
wouldn't work with screen reader.
I have an example of this coded somewhere I can throw it up on code Pen.



On 1/3/19, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> Also, if you are labeling the button with off screen text this can be an
> issue with NVDA. Use aria-label instead.
>> On Jan 3, 2019, at 1:06 AM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> I'm guessing you're not using a real <button> element or <input
>> type="button">. Can you post the code you are using?
>>
>> You tested NVDA on Chrome? What else have you tested? Does it work with
>> NVDA on Firefox? Does JAWS work?
>>
>>
>>
>> On Wed, Jan 2, 2019 at 10:45 PM Jeevan Reddy < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> Hi Friends,
>>> Happy new year 2019 for all of You!.
>>> some of the buttons in our application are not operable with
>>> 'Space/Enter'
>>> when Screen Reader is On, but operable as expected when Screen Reader is
>>> turned OFF.
>>> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
>>> can you pls share some insights how to resolve this?
>>>
>>> Your help is greatly appreciated!
>>>
>>> !
>>>
>>>
>>> --
>>> Best Regards,
>>> Jeevan Reddy,
>>> Accessibility Consultant,
>>> Infosys Ltd,
>>> Bangalore, India.
>>> >>> >>> >>> >>>
>> >> >> >> >
> > > > >


--
Work hard. Have fun. Make history.

From: Jonathan Avila
Date: Thu, Jan 03 2019 8:34AM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

Jonathan Cohn wrote:
Also, if you are labeling the button with off screen text this can be an issue with NVDA. Use aria-label instead.

Can you elaborate on any known issue with buttons and off-screen text with NVDA?

Jonathan

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jonathan Cohn
Sent: Thursday, January 03, 2019 9:41 AM
To: WebAIM Discussion List; glen walker
Subject: Re: [WebAIM] Buttons not operable with 'Space/Enter' When Screen Reader is ON

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Also, if you are labeling the button with off screen text this can be an issue with NVDA. Use aria-label instead.
> On Jan 3, 2019, at 1:06 AM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> I'm guessing you're not using a real <button> element or <input
> type="button">. Can you post the code you are using?
>
> You tested NVDA on Chrome? What else have you tested? Does it work with
> NVDA on Firefox? Does JAWS work?
>
>
>
> On Wed, Jan 2, 2019 at 10:45 PM Jeevan Reddy < = EMAIL ADDRESS REMOVED = >
> wrote:
>
>> Hi Friends,
>> Happy new year 2019 for all of You!.
>> some of the buttons in our application are not operable with 'Space/Enter'
>> when Screen Reader is On, but operable as expected when Screen Reader is
>> turned OFF.
>> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
>> can you pls share some insights how to resolve this?
>>
>> Your help is greatly appreciated!
>>
>> !
>>
>>
>> --
>> Best Regards,
>> Jeevan Reddy,
>> Accessibility Consultant,
>> Infosys Ltd,
>> Bangalore, India.
>> >> >> >> >>
> > > >

From: glen walker
Date: Thu, Jan 03 2019 11:51AM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

Birkir,

If these were synthetic buttons with just an onkeyboard handler (and no
click handler), then they wouldn't work for a sighted mouse user. If that
were the case, hopefully they would have found the problem much sooner.

Glen


On Thu, Jan 3, 2019 at 8:31 AM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> If these are synthetic buttons that only work with onkeyboard
> listeners, they would fail when a screen reader is running.
>


>
>

From: Jonathan Avila
Date: Thu, Jan 03 2019 12:02PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

> If these were synthetic buttons with just an onkeyboard handler (and no
click handler), then they wouldn't work for a sighted mouse user

Not necessarily the case. What Birkir describes is very common. They may be using mouseup or mousedown events on the buttons and not a click handler.

Or possibly they are using a click handler but have some overlay over the button that is the delegate or perhaps looking for some other characteristic of the click event that is not in the one sent by screen readers.

Jonathan

Jonathan Avila
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of glen walker
Sent: Thursday, January 03, 2019 1:52 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Buttons not operable with 'Space/Enter' When Screen Reader is ON

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Birkir,

If these were synthetic buttons with just an onkeyboard handler (and no
click handler), then they wouldn't work for a sighted mouse user. If that
were the case, hopefully they would have found the problem much sooner.

Glen


On Thu, Jan 3, 2019 at 8:31 AM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> If these are synthetic buttons that only work with onkeyboard
> listeners, they would fail when a screen reader is running.
>


>
>

From: glen walker
Date: Thu, Jan 03 2019 3:22PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

Sorry, I wasn't clear on my response. I meant if keyboard handlers were
the **only** handlers on the element, then it wouldn't work for mouse
users. I wasn't addressing whether mouse handlers were present.

On Thu, Jan 3, 2019 at 12:02 PM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> > If these were synthetic buttons with just an onkeyboard handler (and no
> click handler), then they wouldn't work for a sighted mouse user
>
> Not necessarily the case. What Birkir describes is very common. They may
> be using mouseup or mousedown events on the buttons and not a click
> handler.
>
> Or possibly they are using a click handler but have some overlay over the
> button that is the delegate or perhaps looking for some other
> characteristic of the click event that is not in the one sent by screen
> readers.
>
> Jonathan
>
>

From: Patrick H. Lauke
Date: Thu, Jan 03 2019 4:25PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

On 03/01/2019 05:45, Jeevan Reddy wrote:
> Hi Friends,
> Happy new year 2019 for all of You!.
> some of the buttons in our application are not operable with 'Space/Enter'
> when Screen Reader is On, but operable as expected when Screen Reader is
> turned OFF.
> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
> can you pls share some insights how to resolve this?
>
> Your help is greatly appreciated!

As ever, with questions of this kind, it's difficult to help (beyond
lots of stabs in the dark and off-tangent hypothetical discussions)
without seeing the actual code (even just a the markup for the buttons
in question)...

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Birkir R. Gunnarsson
Date: Thu, Jan 03 2019 8:24PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | Next message →

Good points. Yes, my experience is that the synthetic onclick event
sent by screen readers works in most situations, but there are
situations where it doesn't.
These are situations where there is a keyboard handler and mouse
handlers, the author thinks he/she has got everything covered, but
does not consider the synthetic onclick event sent by screen readers.
The lesson, always support the onclick event.
This is also a problem if the event is captured by another element,
e.g. an overlay (if screen reader users can navigate outside of a
modal pop up window in browse mode and try to activate some of the
background elements on the page while the modal is still visible).
The synthetic onclick event is intercepted by the modal dialog div and
either does nothing or closes the modal, but does not activate the
control.


On 1/3/19, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 03/01/2019 05:45, Jeevan Reddy wrote:
>> Hi Friends,
>> Happy new year 2019 for all of You!.
>> some of the buttons in our application are not operable with
>> 'Space/Enter'
>> when Screen Reader is On, but operable as expected when Screen Reader is
>> turned OFF.
>> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
>> can you pls share some insights how to resolve this?
>>
>> Your help is greatly appreciated!
>
> As ever, with questions of this kind, it's difficult to help (beyond
> lots of stabs in the dark and off-tangent hypothetical discussions)
> without seeing the actual code (even just a the markup for the buttons
> in question)...
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.

From: Mohith BP
Date: Thu, Jan 03 2019 10:14PM
Subject: Re: Buttons not operable with 'Space/Enter' When Screen Reader is ON
← Previous message | No next message

Hi Jeevan,

Just adding to the points of Birkir.
I assume these are custom buttons developed with either span or div tags.
Please check the following:
1. Ensure the tabindex attribute and onclick and keyboard events
(onkeydown / onkeyup) are on the same tag.
2. At times onclick events are attached to parent elements.
3. Try adding event.stopPropagation or event.stopImmediatePropogation
in your JS code.
4. Check whether the event.preventDefault is called out.

As suggested by others it will be helpfull if you can share the code
with scripts.

Thanks & Regards,
Mohith B. P.
On 1/3/19, Jeevan Reddy < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Friends,
> Happy new year 2019 for all of You!.
> some of the buttons in our application are not operable with 'Space/Enter'
> when Screen Reader is On, but operable as expected when Screen Reader is
> turned OFF.
> we are using polymer JS, and tested with NVDA 2018.4 on Chrome.
> can you pls share some insights how to resolve this?
>
> Your help is greatly appreciated!
>
> !
>
>
> --
> Best Regards,
> Jeevan Reddy,
> Accessibility Consultant,
> Infosys Ltd,
> Bangalore, India.
> > > > >