Lighthouse report – Form elements do not have associated labels
-
Google Lighthouse report gives me an error, in Lighthouse section Accessibility – Names and Labels
The report says I have to add labels to my field, specifically the file upload field. I have solved it like this:
<label>.[file file]</label>
If I add label tags, and add a dot I pass the test. But this messes up the UI slightly, because I want to add a field without any text.
But if I remove the dot I get the error from Lighthouse again. Is there a better way to add a file upload that passes Google Accessibility test?More info on the error:
Labels ensure that form controls are announced properly by assistive technologies, like screen readers.
Failing Elements
form.wpcf7-form > p > span.wpcf7-form-control-wrap > input#inputfile
<input type=”file” name=”file” size=”40″ class=”wpcf7-form-control wpcf7-file” id=”inputfile” accept=”.jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.…” aria-invalid=”false”>
- The topic ‘Lighthouse report – Form elements do not have associated labels’ is closed to new replies.