Checkboxes are not user friendly for Dragon Naturally Speaking users

[kimviens]

Hello!

This issue was first observed on the Accessibility Feedback Form.

The problem:

Dragon is unable to show the numbers on the checkboxes when the user says "show links" or "click checkbox". See screenshot below for an example where it works correctly:

Now, see screenshot of the Accessibility Feedback Form below to see how the checkboxes are not listed when the Dragon user says the "show links" or "click checkbox" command:

Details:

The root of the issue might be the CSS. And the ::before content.

It looks like the checkboxes are made using a symbol inserted using ::before and that the real checkboxes are hidden by using the following styling in theme.min.css:
.gc-chckbxrdio input[type=checkbox], .gc-chckbxrdio input[type=radio] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

When I deleted the ::before element that appears in the label of the element and when I disabled the CSS mentioned above. Dragon recognizes the real checkboxes and the commands "show links" and "click checkbox" both work.

Screenshot showing that Dragon recognizes the real checkboxes:

[Christopher-O]

In testing we have found similar issues with the radio buttons with Voice Control (for OSX/iOS), but it seems to be hit or miss. I wonder if since the size of the checkbox is set to a width of 1px, that it's difficult for the program to target the "hidden" checkbox. Since there is no need to hide the checkbox in terms of the space (like you would with invisible text meant only for screen readers) since the pseudo checkboxes are larger, I'm curious if replacing those CSS styles with opacity: 0 might be more suitable. Just a thought.