can't select radio buttons in a webpage


Alexandre Alves Toco
 

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10

 


Gene
 

Do you know how to route and click the mouse?  You should always try that if other methods don't work.  it works here. 
 
I also tested the page with firefox and the radio buttons work correctly.
 
Gene

----- Original Message -----
Sent: Saturday, January 12, 2019 12:38 PM
Subject: [nvda] can't select radio buttons in a webpage

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10

 


 

This is another of those instances where I'd almost like to throttle the designers of this page.

First, visually, those three radio buttons are not presented as radio buttons, but as a single bar of side-by-side buttons marked by dividers.  Then, when I listen to NVDA, it notes that this is implemented as a table on top of it all, which adds another layer of indirection depending on how the rendering engine works (and it's clearly different between Firefox and Chrome.

These could have easily been implemented and presented as a straight radio button list, which would have made more sense.  That, or make the first level of the decision tree clicking on a button for one of those three things then leading the user to what has to be filled in otherwise afterward.

This is just crappy design, period, when one web object is masked entirely as far as how either someone who sees, or someone who uses a screen reader, would recognize that it's a "pick one of these three" switch (at least in this case).  You figure that out quickly enough when you see how it behaves as you interact with it visually, but it's still a bad design choice.  People know what radio buttons are, or at least anyone who's been using the internet for more than a few weeks knows what radio buttons are.  They're an object as old as dirt, metaphorically speaking, in the world of web coding.

--

Brian - Windows 10 Home, 64-Bit, Version 1809, Build 17763  

A great deal of intelligence can be invested in ignorance when the need for illusion is deep.

          ~ Saul Bellow, To Jerusalem and Back

 

 


Jonathan COHN
 

I looked a little at the HTML code, and the readio buttons are coded as standard radio buttons and don’t appear to have any strange HTML code. I believe the CSS layout is farily modern without using tables for layout purposes, not that that would effect accessibility by Chrome.

 

With no screen reader and using Safari on a Macintosh , I believe my wife found it difficult to change between investments and the other two categories of the radio button. I believe there might be a change event listener on the radio button, but I am not great at that level of page debugging. They have certainly done some work to make dialog boxes work correctly for screen readers, so I expect it is an oversight of the developers that the site does not work properly with NVDA and Chrome. I would suggest contacting the bank and tell them you are having some accessibility issues.

 

Correct keyboard behavior should be:

  1. When focus is on a radio button using arrow keys will select another radio button.
  2. When focus is on a unselected radio button return should select that radio button.

Hope this help!

 

Jonathan

 

 

From: <nvda@nvda.groups.io> on behalf of Alexandre Alves Toco <alexandretoco@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Saturday, January 12, 2019 at 1:41 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: [nvda] can't select radio buttons in a webpage

 

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10

 


Gene
 

What are you basing your description of radio button function on?  If you are in browse mode, you should be able to press space bar on a radio button on a web site and it will be selected.  This is different than a dialog box, where radio buttons are automatically selected by up or down arrowing through them.  the one you are on is automatically selected.  Return is never used to select a radio button and using return to try to select it may have unwanted consequences such as activating the default button in a dialog, such as the ok button. 
 
If you are in forms mode on a web site, up and down arrowing should automatically select radio buttons, as in a dialog. 
 
Gene

----- Original Message -----
Sent: Sunday, January 13, 2019 4:42 PM
Subject: Re: [nvda] can't select radio buttons in a webpage

I looked a little at the HTML code, and the readio buttons are coded as standard radio buttons and don’t appear to have any strange HTML code. I believe the CSS layout is farily modern without using tables for layout purposes, not that that would effect accessibility by Chrome.

 

With no screen reader and using Safari on a Macintosh , I believe my wife found it difficult to change between investments and the other two categories of the radio button. I believe there might be a change event listener on the radio button, but I am not great at that level of page debugging. They have certainly done some work to make dialog boxes work correctly for screen readers, so I expect it is an oversight of the developers that the site does not work properly with NVDA and Chrome. I would suggest contacting the bank and tell them you are having some accessibility issues.

 

Correct keyboard behavior should be:

  1. When focus is on a radio button using arrow keys will select another radio button.
  2. When focus is on a unselected radio button return should select that radio button.

Hope this help!

 

Jonathan

 

 

From: <nvda@nvda.groups.io> on behalf of Alexandre Alves Toco <alexandretoco@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Saturday, January 12, 2019 at 1:41 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: [nvda] can't select radio buttons in a webpage

 

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10

 


Jonathan COHN
 

OK, I reviewed standard radio buttons with no JS attached, and it is space, not return that will cause a focused non-selected radio button to be selected. Note however, that except for use within a screen reader it is fairly difficult to put focus on a radio button without also selecting it. Generally a  radio group has one tab stop and if no item in the tab group is selected when the radio group is tabbed to either the first or last item will receive focus and be selected. Thereafter using arrow keys will move focus and selection to other radio buttons within the group. In any case, generally both space and return when inNVDA browse mode will cause the selected radio button to be selected. Of course, specific event handlers either from boot strap or from the Bank’s JavaScript are preventing standard radio button behavior. I did see a 

data-toggle=”buttons” attribute surrounding the radio buttons. From some quick glances at comments on the web, this is a boot strap process designed to create check boxes that act like radio buttons but can be unselected, but I believe the latest boot strap has also disabled this  type of widget.

Of course the real issue is where is  the bug causing NVDA with Chrome difficult to select a radio button in this style. It the issue is limited to the bank, then I am not concerned. If it is a boot strap issue, then that is more worrisome. Anybody with experience developing boot strap sites feel like coding up a quick example?

 

 

 

From: <nvda@nvda.groups.io> on behalf of Gene <gsasner@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Sunday, January 13, 2019 at 5:52 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: Re: [nvda] can't select radio buttons in a webpage

 

What are you basing your description of radio button function on?  If you are in browse mode, you should be able to press space bar on a radio button on a web site and it will be selected.  This is different than a dialog box, where radio buttons are automatically selected by up or down arrowing through them.  the one you are on is automatically selected.  Return is never used to select a radio button and using return to try to select it may have unwanted consequences such as activating the default button in a dialog, such as the ok button. 

 

If you are in forms mode on a web site, up and down arrowing should automatically select radio buttons, as in a dialog. 

 

Gene

----- Original Message -----

Sent: Sunday, January 13, 2019 4:42 PM

Subject: Re: [nvda] can't select radio buttons in a webpage

 

I looked a little at the HTML code, and the readio buttons are coded as standard radio buttons and don’t appear to have any strange HTML code. I believe the CSS layout is farily modern without using tables for layout purposes, not that that would effect accessibility by Chrome.

 

With no screen reader and using Safari on a Macintosh , I believe my wife found it difficult to change between investments and the other two categories of the radio button. I believe there might be a change event listener on the radio button, but I am not great at that level of page debugging. They have certainly done some work to make dialog boxes work correctly for screen readers, so I expect it is an oversight of the developers that the site does not work properly with NVDA and Chrome. I would suggest contacting the bank and tell them you are having some accessibility issues.

 

Correct keyboard behavior should be:

  1. When focus is on a radio button using arrow keys will select another radio button.
  2. When focus is on a unselected radio button return should select that radio button.

Hope this help!

 

Jonathan

 

 

From: <nvda@nvda.groups.io> on behalf of Alexandre Alves Toco <alexandretoco@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Saturday, January 12, 2019 at 1:41 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: [nvda] can't select radio buttons in a webpage

 

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10

 


Gene
 

The way radio buttons are supposed to work when not in browse mode anywhere is that you move to it and moving to it, giving it focus causes it to be selected.  You move to the radio button you want to select in a dialog, then tab out of the field.  You are finished in that field.  The reason they are called radio buttons is because, as in a car, they are designed to only allow one selection.  You move to the radio button you want to select and it is the only radio button that can be selected, just as in a car radio, one radio button moves you to one station and you can only activate one at a time.
 
When you are in browse mode, you can activate a radio button with the space bar.  When not in browse mode, but in forms mode, every time you move up or down in a list of radio buttons on a web site, you are selecting the button you move to.
 
Browse has its own way of allowing users to select a radio button.  But as I said, when you are in browse mode, you can use this method.  When not in browse mode, because it is off while you are on a web page or because you are somewhere where there is no browse mode, you up and down arrow and every radio button you move to is selected and no other one is.
 
Gene

----- Original Message -----
Sent: Sunday, January 13, 2019 5:59 PM
Subject: Re: [nvda] can't select radio buttons in a webpage

OK, I reviewed standard radio buttons with no JS attached, and it is space, not return that will cause a focused non-selected radio button to be selected. Note however, that except for use within a screen reader it is fairly difficult to put focus on a radio button without also selecting it. Generally a  radio group has one tab stop and if no item in the tab group is selected when the radio group is tabbed to either the first or last item will receive focus and be selected. Thereafter using arrow keys will move focus and selection to other radio buttons within the group. In any case, generally both space and return when inNVDA browse mode will cause the selected radio button to be selected. Of course, specific event handlers either from boot strap or from the Bank’s JavaScript are preventing standard radio button behavior. I did see a 

data-toggle=”buttons” attribute surrounding the radio buttons. From some quick glances at comments on the web, this is a boot strap process designed to create check boxes that act like radio buttons but can be unselected, but I believe the latest boot strap has also disabled this  type of widget.

Of course the real issue is where is  the bug causing NVDA with Chrome difficult to select a radio button in this style. It the issue is limited to the bank, then I am not concerned. If it is a boot strap issue, then that is more worrisome. Anybody with experience developing boot strap sites feel like coding up a quick example?

 

 

 

From: <nvda@nvda.groups.io> on behalf of Gene <gsasner@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Sunday, January 13, 2019 at 5:52 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: Re: [nvda] can't select radio buttons in a webpage

 

What are you basing your description of radio button function on?  If you are in browse mode, you should be able to press space bar on a radio button on a web site and it will be selected.  This is different than a dialog box, where radio buttons are automatically selected by up or down arrowing through them.  the one you are on is automatically selected.  Return is never used to select a radio button and using return to try to select it may have unwanted consequences such as activating the default button in a dialog, such as the ok button. 

 

If you are in forms mode on a web site, up and down arrowing should automatically select radio buttons, as in a dialog. 

 

Gene

----- Original Message -----

Sent: Sunday, January 13, 2019 4:42 PM

Subject: Re: [nvda] can't select radio buttons in a webpage

 

I looked a little at the HTML code, and the readio buttons are coded as standard radio buttons and don’t appear to have any strange HTML code. I believe the CSS layout is farily modern without using tables for layout purposes, not that that would effect accessibility by Chrome.

 

With no screen reader and using Safari on a Macintosh , I believe my wife found it difficult to change between investments and the other two categories of the radio button. I believe there might be a change event listener on the radio button, but I am not great at that level of page debugging. They have certainly done some work to make dialog boxes work correctly for screen readers, so I expect it is an oversight of the developers that the site does not work properly with NVDA and Chrome. I would suggest contacting the bank and tell them you are having some accessibility issues.

 

Correct keyboard behavior should be:

  1. When focus is on a radio button using arrow keys will select another radio button.
  2. When focus is on a unselected radio button return should select that radio button.

Hope this help!

 

Jonathan

 

 

From: <nvda@nvda.groups.io> on behalf of Alexandre Alves Toco <alexandretoco@...>
Reply-To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Date: Saturday, January 12, 2019 at 1:41 PM
To: "nvda@nvda.groups.io" <nvda@nvda.groups.io>
Subject: [nvda] can't select radio buttons in a webpage

 

                                                               Hi friends!

Although the following page is in portuguese, if you press f you will be placed in the first group of radio buttons.

I was trying to select the button whose labe is investimentos. But I couldn’t.

I made this test in schrome.

https://internetbanking.ourinvest.com.br/Cadastro/DadosIniciais

 

 

Enviado do Email para Windows 10