Accessibility - Provide descriptive text in label elements

Question

I have a toggle checkbox enclosed inside a label element. However, I don't need any text to a label element. But accessibility throws me an error to add a label text which I don't need at all. How do I overcome this error?

<label class="toggle"  for="togglechkbox" id="Remember My ID" >
    <input id="togglechkbox" name="togglechkbox" type="checkbox" >
</label>

Answer 1

Although technically valid from W3C point of view, it has never been very recommended to nest an inside a . IT is often said that some screen reader / browser combinations don't support it. It's perhaps the reason you obtain warnings from your validation tool. It would be safer to put the label immediately before or immediately after the checkbox.

Now to answer a bit more generally to the question, you must provide a label, otherwise screen reader users don't know what the checkbox is for, i.e. they are unable to know what does the checkbox. Alternatively you can remove the label but compensate with aria-label and/or aria-labelledby.

You must do one or the other. Otherwise it isn't screen reader accessible.