Skip to content

Legend on form radio button group not accessible to screen reader #5918

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
ghost opened this issue Oct 18, 2020 · 6 comments · Fixed by #6006
Closed

Legend on form radio button group not accessible to screen reader #5918

ghost opened this issue Oct 18, 2020 · 6 comments · Fixed by #6006
Labels
Status: Confirmed Type: Accessibility

Comments

@ghost
Copy link

ghost commented Oct 18, 2020

Describe the bug

The label for a b-form-group containing a b-form-radio-group is not accessible to the ChromeVox screen reader. Instead of reading the label, ChromeVox reads "Radio button group".

Steps to reproduce the bug

  1. Activate ChromeVox (Ctrl+Alt+Z)
  2. Go to https://bootstrap-vue.org/docs/components/form-radio#grouped-radios
  3. Use the tab key to select the radio button group
  4. ChromeVox reads "Toggle this custom radio, radio button selected; 1 of 4; Radio button group"

Expected behavior

ChromeVox should have read "Toggle this custom radio, radio button selected; 1 of 4; Radios using options"

Versions

Libraries:

Live bootstrap-vue.org website

Environment:

  • Device: Laptop
  • OS: ChromeOS
  • Browser: Chrome
  • Version: 85

Demo link

https://bootstrap-vue.org/docs/components/form-radio#grouped-radios

Additional context

Here's the relevant HTML of the bootstrap-vue website:

<fieldset class="form-group" id="__BVID__753">
  <legend
    tabindex="-1"
    class="bv-no-focus-ring col-form-label pt-0"
    id="__BVID__753__BV_label_"
  >
    Radios using options
  </legend>
  <div tabindex="-1" role="group" class="bv-no-focus-ring">
    <div
      id="radio-group-1"
      role="radiogroup"
      tabindex="-1"
      class="bv-no-focus-ring"
    >
      <div class="custom-control custom-control-inline custom-radio">
        <input
          id="radio-group-1_BV_option_0"
          type="radio"
          name="radio-options"
          class="custom-control-input"
          value="first"
        /><label for="radio-group-1_BV_option_0" class="custom-control-label"
          ><span>Toggle this custom radio</span></label
        >
      </div>
      <div class="custom-control custom-control-inline custom-radio">
        <input
          id="radio-group-1_BV_option_1"
          type="radio"
          name="radio-options"
          class="custom-control-input"
          value="second"
        /><label for="radio-group-1_BV_option_1" class="custom-control-label"
          ><span>Or toggle this other custom radio</span></label
        >
      </div>
      <div class="custom-control custom-control-inline custom-radio">
        <input
          id="radio-group-1_BV_option_2"
          type="radio"
          name="radio-options"
          disabled="disabled"
          class="custom-control-input"
          value="third"
        /><label for="radio-group-1_BV_option_2" class="custom-control-label"
          ><span>This one is Disabled</span></label
        >
      </div>
      <div class="custom-control custom-control-inline custom-radio">
        <input
          id="radio-group-1_BV_option_3"
          type="radio"
          name="radio-options"
          class="custom-control-input"
          value="[object Object]"
        /><label for="radio-group-1_BV_option_3" class="custom-control-label"
          ><span>This is the 4th radio</span></label
        >
      </div>
    </div>
    <!----><!----><!---->
  </div>
</fieldset>

I believe the issue is with the first div with role="group" and the second div with role="radiogroup"

Here's an example that works correctly: https://www.last-child.com/legend-aria-describedby/

<fieldset>
  <legend>Do you like peanut butter on your fish sticks?</legend>
  <p>
    <label for="fishyes"
      ><input id="fishyes" type="radio" name="fish" value="yes" /> Yes</label
    ><br />
    <label for="fishno"
      ><input id="fishno" type="radio" name="fish" value="no" /> No</label
    >
  </p>
</fieldset>
@ghost
Copy link
Author

ghost commented Oct 20, 2020

@jackmu95 Thank you for taking a look at this so quickly!

Can I ask what the reason for removing the bug label was?

I have practically zero experience with accessibility/screen readers, so I apologize if there's something I'm missing. It appears to me that bootstrap-vue's current accessibility markup for radio button groups is invalid--is that understanding correct?

Thank you for your time.

@ghost
Copy link
Author

ghost commented Nov 2, 2020

A possible solution:

Add aria-labelledby to the element with role="group"
Using the bootstrap-vue website HTML above as an example, change from

<div tabindex="-1" role="group" class="bv-no-focus-ring">

to

<div tabindex="-1" role="group" class="bv-no-focus-ring" aria-labelledby="__BVID__753__BV_label_">

Source: https://www.w3.org/WAI/tutorials/forms/grouping/

@jacobmllr95 jacobmllr95 mentioned this issue Nov 4, 2020
Merged
21 tasks
@jacobmllr95
Copy link
Member

@ccsaposs Can you please confirm that the issue is fixed in this deployment preview of the fix:
https://bootstrap-vue-git-fix-form-group-fieldset-accessibility.bootstrap-vue.vercel.app/docs/components/form-radio#grouped-radios

@ghost
Copy link
Author

ghost commented Nov 4, 2020

Looks good! Thank you for fixing this!

@ghost
Copy link
Author

ghost commented Nov 26, 2020

@jackmu95 I'm running into the same issue when adding a description to a radio button group.

I believe the solution would be the same as the solution for the label--the only difference would be adding aria-describedby instead of aria-labelledby to the role="group" element.

@jacobmllr95
Copy link
Member

@ccsaposs Can you please create another issue for that.

@ghost ghost mentioned this issue Nov 27, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Confirmed Type: Accessibility
Projects
None yet
Milestone
No milestone
1 participant
@jacobmllr95