如何不让可访问性集中在复选框上

Question

We have a toggle switch implemented on top of checkbox. Checkbox is for keeping track of whether toggle switch is on or off. Everything works fine until you turn on accessibility. When accessibility is turned on & user taps on the toggle switch, the focus goes to the checkbox but it's not clickable. However, if user clicks on the label, it's clickable. I need to somehow don't let the accessibility focus come to checkbox, but still announce whether it's checked or unchecked on click of toggle switch or the label.

I have tried using tabindex & z-index to not let focus come to the checkbox but both are not making any difference. I tried using visibility:hidden. It works, but then accessibility stops announcing if checkbox is checked or not.

Our implementation :

<div class="myToggleSwitch >
    ::before
    <inputtype="checkbox" disabled="disabled">
        <label>Label for the Toggle Switch
            <div class="switch" >
                ::before
                <div class="switch-control">
                </div>
                ::after
            </div>
       </label>
       ::after
</div>

Answer 1

You can use CSS to set some styles on the switch when the checkbox is focused.

For example:

.myToggleSwitch input[type="checkbox"]:focus + label .switch {
  // Switch styles go here.
  outline: 1px solid blue;
}

In plain English, it reads 'Find any elements with a class of "myToggleSwitch" with a focused checkbox input. Then find an adjacent label with a child element with a class of "switch" and give it a blue outline.'

And to make sure the checkbox isn't visible on the page you can do the following:

.myToggleSwitch input[type="checkbox"] {
  position: absolute:
  left: -1000%;
  visibility: hidden;
}

That hides it and positions it off-screen so that it's still focus-able but not visible on the page.

Answer 2

Your HTML structure seems broken.

There is no relation between the input and it's label. Neither is the input nested inside the label, nor do you use a for attribute to link both.

The checkbox is disabled in your example code.

In that case I'm assuming you used some styling that actually does not depend on the checkbox's state? Because clicking on the label will not change the input's value in your example.