1

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?

  • The problem is you don't have any content or you have a error in the title ? Can you show the error ? – Ondrelat Mar 06 '22 at 10:15

2 Answers2

0

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 class="theme-switch-wrapper">
       <label class="theme-switch" for="checkbox">
         <input type="checkbox" id="checkbox" />
         <span class="slider round"></span>
         <span class="visually-hidden">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.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • 1
    I have space constraints since this button appears after the menu and it would overflow on smaller devices. I also see tabbing skips the toggle on my pc. –  Mar 07 '22 at 11:32
  • space is normally the reason for hidden labels. Not sure by what you mean on it skipping the toggle though, are you perhaps missing a `:focus` declaration in your CSS, so it is focused but you can't see that it is focused? Other than that if you are using a library it might be interfering, or maybe I just misunderstood! – GrahamTheDev Mar 07 '22 at 22:50
0

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.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
  • Your suggestion breaks the toggle button. –  Mar 07 '22 at 11:22
  • I didn't precise it because it seemed obvious, but of course maybe you have to adapt your CSS and/or JavaScript. Normally it shouldn't be too hard to do. – QuentinC Mar 07 '22 at 12:07