标签后的冒号；任何可访问性问题？

Question

我喜欢在标签后加一个冒号，但对于表单构建组件，我喜欢不必指定它们。因此我有这样的CSS：

label::after {
  content: ':';
}

这工作正常，但我的人偶脚本，使用 aria 选择器，由于冒号出现在可访问的名称中，所以没有找到标记为那样的输入。例如，鉴于此：

<label for="first-name">First name</label><input id="first-name" type="text" />

选择器 aria/First name 找不到输入。

我可以在 aria 选择器中添加一个 :，但这很烦人，而且我不确定冒号是否最终成为使用屏幕阅读器的人的噪音，这是错误的担心，或者是否有更简洁的方法，冒号对视力正常的读者可见，但屏幕阅读器看不到。

Answer 1

我在输入问题时找到了解决方法。显然可以指定内容的替代文本，因此这可以显示“：”但使其对可访问性树不可见。重复 content 属性以捕获不支持此语法的浏览器。这似乎是将标记输入的可访问名称设置为不包括 :.

label::after {
  content: ':';
  content: ':' / '';
}

Answer 2

使用 CSS:content 的 alt 功能很有创意，但主要适用于 Chrome（和 Edge，因为它是 chromium）。 Firefox 和 Safari 尚不支持它，实际上它使 content 属性在这些浏览器上无效，因此您的 content 根本不会显示。

在 Chrome 上，它也没有得到完全支持。替代文本因 url 内容而受到尊重：

label::after {
  content: url(image.gif) / "my alt text";
}

这意味着当您使用屏幕 reader 导航到标签或与该标签关联的输入时，您会听到替代文本。

但对于 text content，不使用替代文本。它将 all 替代文本视为 NULL。

label::after {
  content: "hello" / "my alt text"; 
}
label::after {
  content: "hello" / ""; 
}

这两个示例都会导致 content 到不用于可访问名称计算（https://www.w3.org/TR/accname-1.1/#step2 中的步骤 2.F.ii），它为您提供了您想要的 puppeteer - 一个没有内容的 ARIA 选择器。

所有浏览器都支持的另一种方法是将 content 放在带有 aria-hidden="true".

的元素上

<style>
.foo::after {
  content: ':';
}
<style>

<label for="first-name">First name<span class="foo" aria-hidden="true"></span></label>
<input id="first-name" type="text" />

标签后的冒号；任何可访问性问题？

Colons after labels; any accessibility concerns?

html

css

accessibility

wai-aria