How can I add "aria-labelledby" attributes to checkboxes inside of a <asp:CheckBoxList>?

I need to update my facet checkboxes inside an <asp:CheckBoxList> to have the aria-labelledby attribute to be more accessible to users. However, I can't find a way to target the checkbox portion directly.

If I add them like this in the controller:

//checkboxListItem is the object representing the checkbox/label collection
checkboxListItem.Attributes.Add("aria-labelledby", ${uniqueLabelOfTheCheckBox.ID}_{indexOfFacet});
checkBoxList.Items.Add(checkboxListItem); //adds the object to the ASP checkboxList

Then the markup will wrap the aria-labelledby in a <span> tag, which is incorrect. How and where can I add the ARIA label to the checkbox itself?

Solution

You don't have to use aria-labelledby in this case because it's functionality is automatically provided by using label for="". So the generated html code by asp.net it is just fine.

From the documentation:

Fortunately, the HTML with type="checkbox" works with native . When feasible, use the following:

<label for="tac">
 <input id="tac" type="checkbox" name="terms-and-conditions" />
    I agree to the Terms and Conditions.
</label>
<p><a href="tac.html">Read our Terms and Conditions</a>.</p>

For more details read here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby