Empty form label: A form label is present, but does not contain any content

Question

I get the error in the title when using the Wave Accessibility tool. My HTML is below (I use it to toggle dark-light mode with JS).

<span class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>
       </label>
     </span>

How do I solve this?

Answer 1

The error is rather explicit: the label has no text content, and hance no accessible name can be given to the checkbox. The consequence is that screen reader users won't know what's the purpose of that checkbox.

By the way, you should avoid the construction where the <input> is inside the <label>, and use the more conventional construction where the <input> and the <label> are near from eachother. The former isn't well supported by several screen readers, and so is discouraged.

My suggestion whould be something like this:

       <label class="theme-switch" for="checkbox">
Enable dark mode
</label>
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>

You may use the visually hidden text technique, if you don't want the text "Enable dark mode" to effectively appear on screen.