自定义占位符元素未识别为可访问性占位符

Question

我有一个带有普通输入字段和占位符的表单，并且它们不会被灯塔测试的可访问性标记。

此表单中还有一个多选组件，它使用放置在多选字段上的自定义范围来用作“占位符”

我使用 Vue3，所以有很多生成的 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">Selecteer categorie</span>
</div>

前端看起来像这样

现在跨度multiselect__placeholder将被灯塔标记为没有足够的颜色对比度。

有没有一种方法，例如使用 aria 属性或完全不同的东西来将此占位符元素链接到实际的输入字段，以便它符合 Lighthouse 和任何可访问性检查器？

提前致谢

Answer 1

Lighthouse 可能忽略了默认占位符的低对比度，因为它们是浏览器样式。想要增加默认占位符对比度的用户可以使用用户样式表。

不过，根据 WCAG 2.1 成功标准 1.4.3，您收到的低对比度警告是正确的：

最小对比度成功标准 (1.4.3) 适用于页面中的文本，包括占位符文本 [...]
— WCAG 2.1 SC 1.4.3 对比度（最小）

这意味着无论有或没有 Vue3，您的 UI 在 WCAG 2.1 AA 审核中都将不符合此标准。看起来这对 Vue3 来说更是一个问题，因为用户样式表提高占位符对比度 (::placeholder) 不会有任何效果。 （您可能会争辩说，修复默认浏览器样式中的对比度不是您的应用程序关心的问题。）

这里明显的问题是，如果增加占位符对比度，它可能会被误认为是输入值。问题变成：您真的需要占位符文本吗？

占位符文本：

绝对不应该标记输入（使用

<label>
• ）不应在标签中添加额外的细节（使用
aria-describedby
• ）
...它还有很多其他可访问性和可用性问题。因此，可访问性专家认为最好根本不使用它们。

表单字段中的占位符有害
• ，NN Group
可访问表单的剖析：占位符问题
• 、Deque
不要使用占位符属性
• ，Eric Bailey（用于 Smashing mag）