How do you prevent NVDA from reading check boxes as "Unlabeled"?

Question

Is there a way to write semantic HTML for checkboxes where it won't read it as "unlabeled, check box"?

The following html results in "unlabeled, check box, not checked, Yes" to be read by the screen reader.

<p>Is this checkbox selected?</p>
<input type="checkbox">
<label>Yes</label>

Opening NVDA's Elements List on Interactive Accessibility: Training 3.2 which claims this is the accessible example also results in "unlabeled, check box" treeview entries to be generated.

Is there a way to write checkboxes to ensure they aren't marked as "unlabeled"? Or is this a quirk of NVDA itself?

score 1 · Answer 1 · answered Mar 22 '21 at 13:07

This is actually a Chrome browser defect. I'm not aware of a workaround, but one would not be recommended, as it could alter correct behavior in other browsers and screen readers.

For more information check the NVDA issues list on GitHub: Unlabeled is prepended before labelled radio elements while in elements list

I see your example is incomplete with IDs, but I understand what issues you are talking about. It will happen no matter how good is the markup with native or ARIA checkbox controls.

score 0 · Answer 2 · answered Sep 01 '20 at 11:23

Add some id in your label and add aria-labelledby in the input. The value of aria-labelledby should be the id of the lebel. Hence your code block should be something like this:

<p>Is this checkbox selected?</p>
<input type="checkbox" aria-labelledby="someId">
<label id="someId">Yes</label>

How do you prevent NVDA from reading check boxes as "Unlabeled"?

2 Answers2