4

I have a form with 120 radio buttons, grouped in 30 fieldsets of each 4 radiobuttons. There is one submit <button>. There are no other inputs.

When not using JAWS, the tab behaviour of various browsers work fine. When focusing a fieldsets first radio button, the arrows jump between radiobuttons, and space bar selects one. Tab jumps to the next fieldset.

As soon as JAWS is running, when focusing a fieldsets first radio button, 'form mode' is not entered automatically. Arrows start reading characters one by one. Tab jumps to the next fieldset. Pressing enter enters form mode ('plonk') and then it works as normal.

'auto form mode' is selected in the settings and it works on other forms on the internet.

two questions:

  • does anyone know why this could happen ?
  • does anyone know a way to force jaws into form mode using html ?

on request: a snippet of the html

<fieldset>
    <legend>
        <h2 tabindex="0">
            Text
        </h2>
    </legend>
    <p tabindex="0">
        Text
    </p>
    <input type="radio" id="xxxx" name="xxxx" data-foo="xxx" value="a">
    <label for="xxxx">
        <strong>
            Text 
        </strong>
    </label>
    <input type="radio" id="yyyy" name="xxxx" data-foo="yyyy" value="b">
    <label for="yyyy">
        <strong>
            Text 
        </strong>
    </label>
    <input type="radio" id="zzzz" name="xxxx" data-foo="zzzz" value="d">
    <label for="zzzz">
        Text
    </label>
</fieldset>
commonpike
  • 10,499
  • 4
  • 65
  • 58
  • Could you share a code sample? My first thought is to check you have a valid form element wrapping around the inputs, with no typos, etc. – stringy Feb 28 '17 at 04:35
  • it gives 'no errors or warnings' at https://validator.w3.org/ (which is quite a feat :-)) – commonpike Feb 28 '17 at 09:35
  • So your fieldset contains tabbable objects other than the radio buttons? In your snippet, the h2 and 'text' paragraph are focusable because of tabindex=0, so you have to tab three times to get to the first radio button. That shouldn't matter but I wanted to make sure I understood. Also, does your real code have single button radio groups? Your snippet shows a different `name` for each radio button which would make them separate radio groups rather than one radio group. Again, that shouldn't affect forms mode. Just trying to understand. – slugolicious Mar 03 '17 at 00:52
  • @slugolicious yes, there is a tabbable ``

    `` that I really want to have read by the screenreader before you get to the radiobuttons. it's like an introduction ('do you like cherries ?' yes / no / dontknow)

     – commonpike Mar 03 '17 at 09:11
  • `Your snippet shows a different name for each radio button` - ouch sorry, that was a cut and paste error. in each fieldset, 3 radiobuttons are mutually exclusive. fixed the question. – commonpike Mar 03 '17 at 09:12
  • 1
    Side issue from the forms mode, if your radio group was contained in a `
    ` and the `
    ` had an `aria-labelledby` pointing to the the `

    ` (assuming the `

    ` had an `id=`), then your introduction would be read when you first tab to the radio button. And it works better than `tabindex=0` on the `

    ` because the introduction will **also** be read when you tab backwards if you were past the radio buttons and you shift+tabbed back to the radio group. Your `

    ` would not be read in the tabindex case (because your focus isn't on it yet) but it would be read if `aria-labelledby` was used.

     – slugolicious Mar 04 '17 at 15:21
  • aria-labelledby is a nice suggestion, thank you. however, fieldset/legend is trying to do the same. that works: people tab through the legend, the question, and if they would enter form mode, the legend is repeated on each radio button. – commonpike Mar 07 '17 at 14:00

1 Answers1

2

This is not a solution .. posting it for future readers

http://tink.uk/understanding-screen-reader-interaction-modes/

There is one anomaly amongst form fields when it comes to forms/focus mode. Although it’s possible to select a radio button without switching modes, it is necessary to be in forms/focus mode in order to use the cursor keys to cycle through the radio buttons in a group. Being unaware of this can sometimes lead to the mistaken belief that a radio group is somehow flawed.

This looks like what I am seeing. You have to actually select the first radio button to enter form mode (which then says 'plunk') before you can navigate the other options. If you don't, the cursor keys will start reading characters ('a','space','space',..) and the tab key takes the focus away from the fieldset.

So this might be 'intended behaviour' :-/

commonpike
  • 10,499
  • 4
  • 65
  • 58
  • did you find a solution for this? Im having same issue with a form using radio buttons within fieldset, If I hit enter it goes to form mode and I can navigation buttons using arrow keys, otherwise I dont see any :focus css styles applied – NickMcB Apr 06 '17 at 09:18
  • No. Assuming this was intended behaviour, all I could think of was not using radio buttons, but f.e. a single select element, which seems to behave more intuitive. – commonpike Apr 10 '17 at 11:17