I have a form with normal input fields and placeholder and they don’t get flagged by the lighthouse test for accessibility.

There is also a multiselect component in this form which uses a custom span that is placed over the multiselect field to be used as the ‘placeholder’

I use Vue3 so there is a lot of generated HTML and for the multiselect it looks like this:

<div class="multiselect__tags">
  <div class="multiselect__tags-wrap" style="display: none;"></div>  
  <div class="multiselect__spinner" style="display: none;"></div>
  <input name="" id="id_06360327365008687" type="text" autocomplete="off" spellcheck="false" placeholder="Selecteer categorie" tabindex="0" class="multiselect__input" aria-controls="listbox-id_06360327365008687" style="width: 0px; position: absolute; padding: 0px;">
  <span class="multiselect__placeholder">Selecteer categorie</span>
</div>

Which looks like this in the frontend

Now the span multiselect__placeholder will get flagged by lighthouse as having not enough color contrast.

Is there a way for instance with aria attributes or something totally different to link this placeholder element to the actual input field so that it is compliant for Lighthouse and any accessibility checker?

Thanks in advance