I can't get this to pass for accessibility

This bit of code:

<fieldset class='mt-4 col-xxl-2 justify-content-between col d-flex' aria-label="color theme switcher" role='radiogroup'>

                         <label for="light"></label>
                         <span class="align-items-end d-flex toggle__wrapper">
                               <input type="radio" name="theme" id="light" checked>
                               <input type="radio" name="theme" id="dark">
                               <span aria-hidden="true" class="toggle__switcher"></span>
                         </span>
                         <label class='col order-first' for="dark">Dark Mode</label
</fieldset>

I keep getting :

Form elements must have labels
<input type="radio" name="theme" id="light" checked="">

But there are labels?
Any help is appreciated.
Thanks

Please post the link to the Step

Labels don’t really do any good if they don’t have text in them.

They also don’t work properly if they are missing a > on the closing tag.

But ya, like @JeremyLT said, we need a little more context to give you better help.

thank you, but it’s just missing the closing tag on the copied code, the original has it.
I will try with the light label and hiding it as it should not have a visible ‘light’ text.

Please… Please give us the link for the Step… Please

Looks like a theme switcher. I don’t think it has anything to do with the curriculum. I’m guessing the editor is complaining (might be Microsoft Edge Tools axe/forms).

@bbsmooth might have a better suggestion than this. Not sure if it should have role="button" and aria-pressed="true" (or false depending on the state).

<label for="light" aria-label="Switch to light mode">
  <input type="radio" name="theme" id="light" checked />
</label>

I would suggest using buttons instead.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.