Form label is present, no content

[shiffman]

(Also on homepage)

Empty form label
What It Means
A form label is present, but does not contain any content.
Why It Matters
A <label> element that is associated to a form control but does not contain text will not present any information about the form control to the user.
How to Fix It
Ensure that the form label contains text that describes the function of the associated form control. > Labels are not required for image, submit, reset, button, or hidden form controls. If a label is not necessary visually, a descriptive title attribute may be added to the form control.

[vimkat]

This is the toggle button for the mobile navigation. To make the hamburger animated, it was made with three stacked spans. I'm not quite sure how we could incorporate text here that is only visible to screen readers... 🤔

[bjorvack]

You could use a sr-only class to hide the text for normal users. Something like toggle menu could be "shown" for screen readers

[phucduong86]

@shiffman @vimkat This is issue has been resolved and can be closed.
The button has appropriate aria-label and aria-role. When tested with VoiceOver/NVDA it announces "Open navigation menu"

<button id="menu-button" class="mobilenav-toggle" tabindex="0" aria-haspopup="true" aria-controls="global-nav" aria-label="Open navigation menu"> <span></span> <span></span> <span></span> </button>

[shiffman]

Thank you!!!