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 >
       <label  for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span ></span>
       </label>
     </span>

How do I solve this?

CodePudding user response：

So your label needs some text within it that can be used as the text for assistive technology.

At the moment you have HTML nodes but no text content.

One way to solve this is with visually hidden text, which assistive technology can access but is not visible on the screen visually.

Example

In the below example I have added an extra span containing the text for your label. I have then hidden it visually using the visually-hidden class.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<span >
       <label  for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span ></span>
         <span >Label for the input</span>
       </label>
     </span>

Final note

It isn't just people using assistive tech you need to consider. Visible labels help everybody, especially those with cognitive disabilities or accuracy issues (you can click a label and it will focus the input it is associated with).

I would suggest a slight redesign so that the label text is visible for everyone, the solution offered above is if you are constrained and cannot (not "don't want to"!) make such an adjustment to the design.

CodePudding user response：

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  for="checkbox">
Enable dark mode
</label>
         <input type="checkbox" id="checkbox" />
         <span ></span>

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