Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't apply aria-labelledby to <b-form-checkbox>

See original GitHub issue

Describe the bug

I’m not sure if you’d classify this as a bug or feature request. Please update if needed.

The problem is I need to apply the aria-labelledby attribute to the actual checkbox. When I set the attribute on a <b-form-checkbox> it gets applied to the wrapping div, not the inner <input type='checkbox'>. I’m not sure this is sufficient for screen readers to identify the relationship between the checkboxes, because the aria-labelledby isn’t directly attached to the actual input.

Steps to reproduce the bug

Set aria-labelledby on a <b-form-checkbox>
Observe that the attribute is applied to the wrapper div (with .custom-checkbox), not the inner element.

Expected behavior

I think aria-labelledby should be passed through to the <input> or possibly set on both the input and the wrapper div.

Versions

Libraries:

BootstrapVue: 2.0.0-rc.15
Bootstrap: 4.3.1
Vue: 2.6.10

Environment:

Additional context

I’m running accessibility audits on my code using the Axe plugin.

I’ve got a <b-table> with rows, and each row has a checkbox to select the row. Each of these checkboxes has the same ‘name’ attribute. I can put a label (with .sr-only class) on each checkbox, but Axe says that these should also have an aria-labelledby pointing to the same label. I.e., because the checkboxes are related they each need both an individual label and a group label to show that they are related.

I can’t apply a group label through the normal means of using <b-form-group>, <legend>, etc because each checkbox is in a separate <tr>. When aria-labelledby is attached to the checkbox’s wrapper div, Axe doesn’t seem to think this is sufficient.

I also tried using @hook:mounted on each <b-form-checkbox> to try to insert the aria-labelledby attribute, but using this technique I can’t seem to get a handle on the specific <b-form-checkbox> component.

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

tmorehousecommented, Apr 21, 2019

Available now in v2.0.0-rc.19

0reactions

tmorehousecommented, Apr 22, 2019

Maybe if we see a non empty aria-labelledby, we add both the label ID and the content of the aria-labelled by prop (concatenated with a space), but we should find out for sure if that is needed

Top Results From Across the Web

Allow form options to render accessibility attributes · Issue #3771

Currently, it's not possible to add attributes like aria-label , aria-describedby , title , etc. to form options used in a select or...

Form Checkbox | Components - BootstrapVue

You can customize the checked and unchecked values by specifying the value and unchecked-value properties, respectively. The v-model binds to the checked prop....

Setting condition for vue bootstrap checkbox component prop

I have a Bootstrap Vue b-form-checkbox-group similar to the one bellow. The listofOption comes from backend and from legacy databses. Sometime ...

aria-labelledby - Accessibility - MDN Web Docs

The aria-labelledby property enables authors to reference other elements on the page to define an accessible name. This is useful when using ...

Labeling Controls | Web Accessibility Initiative (WAI) - W3C

Provide labels to identify all form controls, including text fields, checkboxes, radio buttons, and drop-down menus. In most cases, this is done by...