• 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”>

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Lighthouse report – Form elements do not have associated labels’ is closed to new replies.