Vue3自定义多选框placeholder无障碍合规解决方案咨询

针对你遇到的Lighthouse标记自定义span.multiselect__placeholder颜色对比度不足的问题，有几个可行的方案，兼顾无障碍要求和视觉需求：

方案1：直接修复颜色对比度（最合规） #

Lighthouse的检测核心是可见文本必须满足最低对比度标准（普通文本要求4.5:1，大文本3:1）。既然这个span是视觉上的占位符，直接调整它的文字颜色/背景色，让对比度达标是最直接的解决方式，完全符合无障碍规范。

方案2：通过ARIA属性优化语义关联 #

如果不想修改视觉样式，可以通过ARIA属性让无障碍工具正确识别这个span的角色，避免误判：

• 给自定义占位符span添加aria-hidden="true"：因为原生<input>已经带有placeholder属性，屏幕阅读器会读取原生input的占位符内容，这个span只是视觉补充，不需要被无障碍工具识别，添加该属性后会跳过对它的语义解析，自然也不会触发对比度检测。
• 确保原生input的无障碍属性完整：保留input的placeholder属性，同时如果该多选组件关联了<label>，要通过for属性和input的id绑定（比如<label for="id_06360327365008687">分类选择</label>），强化语义关联。

调整后的HTML结构示例：

<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" aria-hidden="true">Selecteer categorie</span>
</div>

方案3：替换视觉占位符实现方式 #

如果组件允许，也可以把自定义span替换为CSS伪元素（比如:before/:after）来实现视觉占位符效果。CSS生成的内容不会被无障碍工具识别，也就不会触发对比度检测，同时保留原生input的placeholder属性确保屏幕阅读器正常读取。

内容的提问来源于stack exchange，提问作者Filip Huysmans