0

I've a sign up form with a really simple markup which doesn't support accessibility. It is basically following:

<div class="responsiveCell responsiveCellSize2">
          <div class="alignBottom minSize2">
            <div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
              <input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
              <span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
            </div>
          </div>
          <div class="clear">&nbsp;</div>
          <div style="alignTop minSize2">
            <div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">&nbsp;
    </div>
          </div>
        </div>
        <div class="responsiveCell responsiveCellSize1 emptyCell">&nbsp;</div>

And this pattern occurs about 50 times on the page. This markup already has my extra markup for supporting accessibility.

Markup cannot be changed in the backend.

Now I'm facing an issue where user cannot proceed to next element while pressing tab.

Keyboard navigation stops to first instance of a SPAN element which has following attributes:

  • role="button"
  • aria-expanded="true"
  • tabindex="0"
user1271930
  • 331
  • 1
  • 7
  • 21

1 Answers1

0

If I take your code snippet and repeat it several times in a test file, I can successfully tab to each checkbox and each "Economy" label. It's a little unusual to have the label of a checkbox be a button instead of plain text, but there isn't anything invalid about the html. The screen reader announces it just fine.

"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"
slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • Ahaa, so if I were to change it from button to group then it would make a lot more sense for people listening. The actual problem is that the markup is the same for whole page but I need to use for example Economy as a group for other chekckboxes/elements. And when Economy is focusable it somehow prevents user from accessing "descendant" elements. I'm not quite sure that should I use tabindex value and seems like I need to change them dynamically. – user1271930 May 18 '18 at 10:18
  • Are you trying to make an accordion? Is the page you're working on publicly available yet? – slugolicious May 18 '18 at 12:52