使用占位符作为标签是否符合 WCAG 2？
Does using a placeholder as a label comply with WCAG 2?
我知道使用占位符文本作为标签不太容易访问，但它在技术上是否违反 WCAG 2？我找不到任何明确的内容，但我想知道对该标准进行更多的法律解读是否会在其中找到一些内容。
先阅读：这并不是建议您应该使用占位符而不是标签，更多的是关于在 WCAG 指导下占位符是否足够的思想实验。如果您确实使用占位符而不是标签，那么您的网站将无法访问，正如我之前在数百个答案中所说的那样。如果您因歧视而被起诉，我怀疑此答案中的任何内容都会对您有所帮助（也不应该）。
要清楚 - 使用可见且正确关联的标签！ /endRant 呵呵。
简答
只有一个占位符，很可能没有标签确实符合 WCAG 2.1，但谁知道所有冲突的准则。
你可能会认为在数万个单词中会有一行写着“使用标签”或“仅占位符输入将不符合此标准”，但我找不到它。
以下内容可能难以阅读，因为我阅读了我能找到的每一页以获得明确的答案，所以它可能有点脱节，抱歉！
进入正题
好吧，假设我们暂时不关心可用性，而是关注关于 WCAG 2.1 的“法律条文”，因为这是一个有趣的问题。
现在让我们也假设我们只是在谈论标准 <inputs> 和 <textarea>s 来简化这一切（因为复选框、选择等都肯定需要标签），而且它们是唯一的无论如何都接受占位符值（我认为？！）。
哪些规则适用于可能相关的输入和标签？
与此处相关的是 1.1.1 Non-text Context, 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, 3.3.2 labels or instructions and 4.1.2 Name, Role, Value. I later found 2.5.3: Label in Name。
1.1.1
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
从技术上讲，这里没有完全涵盖标准 <input>，此标准更适用于用作按钮的图像、自定义控件等。
但是，如果我们假设我们可以扩展 1.1.1 以涵盖 <input>，那么此标准中是否有任何内容意味着我们不能使用占位符（或 有 有关联的标签）。
如果您阅读整页内容，则没有一处具体提到 <label> 需要在表单控件上使用的元素。
结果：到目前为止都没有答案
1.3.1
检查 1.3.1 - 虽然它提到了标签，但没有在任何地方特别提到 <label> 元素。它还指出，这是关于关系是否应该以编程方式确定或以文本形式呈现的“判断电话”。
There may also be cases where it may be a judgment call as to whether the relationships should be programmatically determined or be presented in text. However, when technologies support programmatic relationships, it is strongly encouraged that information and relationships be programmatically determined rather than described in text.
结果：两种方式都没有明确的答案
2.4.6
现在我们可以打折 2.4.6 标题和标签，因为它只要求标签是描述性的，没有具体说明必须提供标签。
结果：不相关
3.3.2
说到这里，“标签或说明”一定会给我们一些具体的答案吧？
This Success Criterion does not require that labels or instructions be correctly marked up, identified, or associated with their respective controls.
好烦人，这里没有答案！
事实上，它让我们回到了 1.3.1，我们已经看过并确定没有明确的答案。
它还向我们指出了 4.1.2 - 也许我们会根据该标准看一下？
结果：不相关
4.1.2
对，一定是这个！它至少在正确的轨道上开始！
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined;
现在的关键部分是“以编程方式确定”。
好的，那么 "programmatically determined" 的定义是什么？
determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities
好吧，现在我们可能会有所作为。不同的用户代理和辅助技术能否提取占位符信息？这是一种有效的标记技术吗？
结果：仍然没有确定的答案
这是我们最终找到相关 WCAG 推荐的地方（或者我们找到了吗？）
成功标准 2.5.3：名称中的标签
2.5.3 label in name肯定是我们要找的确认。
Note that placeholder text within an input field is not considered an appropriate means of providing a label. The HTML5 specification states The placeholder attribute should not be used as an alternative to a . However, it is worth noting that "label" in that HTML5 statement is in code brackets and links to the label element. For the purposes of this Label in Name Success Criterion, "label" is not used in such a programmatic sense but is simply referring to a text string in close visual proximity to a component. As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input.
在所有那些杂乱无章的内容中（你可以看出我厌倦了阅读那些令人费解和不清楚的指南。）它说了一些有趣的事情。
“如果输入包含占位符文本，则此类文本可能是名称中标签的候选者。”
这样我们就有了一个“以编程方式确定”的控件名称。 （见下一个标题）
上面段落的旁注：
“请注意，输入字段中的占位符文本不被视为提供标签的适当方式”部分。会让您认为占位符作为标签无效。
它还声明“HTML5 规范声明占位符属性不应用作 <label> 的替代项。”
现在对我来说这足以说服您使用标签。
然而，WCAG 再次指出网页应该是“有效的 HTML”（在 SC 4.1.1 - Parsing 之下）。
也是<input> 的占位符有效 HTML？嗯答案（根据W3C validator是肯定的！下面是有效的HTML！
<html lang="en">
<head>
<title>test</title>
</head>
<body>
<form>
<input placeholder="test"/>
</form>
</body>
</html>
所以如果它是有效的，我会说技术上是可以接受的。
可访问的名称计算
我得到 side-tracked 一秒钟。我说的是 placeholder 属性是可访问名称计算的有效候选者。
Here it is, the accessible name computation for an <input>。相关点是第 4 点：
- Otherwise use the control's placeholder attribute.
好的 placeholder 对“程序可确定”有效，但标签是否必须可见？
有趣的是，您不必为 1.1.1、1.3.1 和 4.1.2 设置可见标签，因此我们不能使用该参数来表示需要实际标签。
取自H44: Using label elements to associate text labels with form controls
This technique (associating a label with an input) is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS.
话虽如此，下一句....
However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
但在3.3.2中虽然必须可见，但不一定要正确标记（记住，我早就说过了！）。
所以我在 WCAG 中找到了所有相关信息，结果仍然模糊，但话虽如此，我确实有一个结论要告诉你！
结论
WCAG 中没有任何地方明确声明占位符不能用作标签。
WCAG also states that a title can be used to label an input 这比占位符还糟糕。
我可能在某个地方漏掉了一个关键的句子，但从我读到的内容来看，我相信（非常令人惊讶！！）它在以下情况下有效WCAG 2.1 仅在 <input>.
上有一个占位符
显然正如我多次声明的那样不要仅在输入中使用占位符因为很多用户无法访问它（患有焦虑症或学习困难的人真的很讨厌带有占位符标签的输入，因为当他们键入时标签会消失，因此他们无法检查他们是否填写了正确的字段而不删除所有内容），某些屏幕 reader 和浏览器组合不适用于它们等
真正的简短回答：满足所有成功标准是不够的
2.5.3: Label in Name 指出占位符可能是“名称中的标签”的候选者。
这并不意味着这会满足3.3.2 Labels or Instructions。
While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels.
SC 3.3.2 does require a visible label（文本或图标，例如带有放大镜按钮的搜索表单）或说明.
on the WCAG github 也讨论了“隐藏标签”。
如果您反对占位符不是“隐藏的”，那么一旦该字段被填充，情况就不再如此，例如在使用屏幕放大镜时可能难以理解其含义）。它还受浏览器自动填充功能的影响。
所以使用占位符，事实上，并不违反 WCAG，它只是不够：当占位符不可见时，2.5.3 SC 将不适用，3.3.2 将失败，除非说明或其他技术是使用过。
我知道使用占位符文本作为标签不太容易访问，但它在技术上是否违反 WCAG 2？我找不到任何明确的内容，但我想知道对该标准进行更多的法律解读是否会在其中找到一些内容。
先阅读：这并不是建议您应该使用占位符而不是标签，更多的是关于在 WCAG 指导下占位符是否足够的思想实验。如果您确实使用占位符而不是标签，那么您的网站将无法访问，正如我之前在数百个答案中所说的那样。如果您因歧视而被起诉，我怀疑此答案中的任何内容都会对您有所帮助（也不应该）。
要清楚 - 使用可见且正确关联的标签！ /endRant 呵呵。
简答
只有一个占位符，很可能没有标签确实符合 WCAG 2.1，但谁知道所有冲突的准则。
你可能会认为在数万个单词中会有一行写着“使用标签”或“仅占位符输入将不符合此标准”，但我找不到它。
以下内容可能难以阅读，因为我阅读了我能找到的每一页以获得明确的答案，所以它可能有点脱节，抱歉！
进入正题
好吧，假设我们暂时不关心可用性，而是关注关于 WCAG 2.1 的“法律条文”，因为这是一个有趣的问题。
现在让我们也假设我们只是在谈论标准 <inputs> 和 <textarea>s 来简化这一切（因为复选框、选择等都肯定需要标签），而且它们是唯一的无论如何都接受占位符值（我认为？！）。
哪些规则适用于可能相关的输入和标签？
与此处相关的是 1.1.1 Non-text Context, 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, 3.3.2 labels or instructions and 4.1.2 Name, Role, Value. I later found 2.5.3: Label in Name。
1.1.1
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
从技术上讲，这里没有完全涵盖标准 <input>，此标准更适用于用作按钮的图像、自定义控件等。
但是，如果我们假设我们可以扩展 1.1.1 以涵盖 <input>，那么此标准中是否有任何内容意味着我们不能使用占位符（或 有 有关联的标签）。
如果您阅读整页内容，则没有一处具体提到 <label> 需要在表单控件上使用的元素。
结果：到目前为止都没有答案
1.3.1
检查 1.3.1 - 虽然它提到了标签，但没有在任何地方特别提到 <label> 元素。它还指出，这是关于关系是否应该以编程方式确定或以文本形式呈现的“判断电话”。
There may also be cases where it may be a judgment call as to whether the relationships should be programmatically determined or be presented in text. However, when technologies support programmatic relationships, it is strongly encouraged that information and relationships be programmatically determined rather than described in text.
结果：两种方式都没有明确的答案
2.4.6
现在我们可以打折 2.4.6 标题和标签，因为它只要求标签是描述性的，没有具体说明必须提供标签。
结果：不相关
3.3.2
说到这里，“标签或说明”一定会给我们一些具体的答案吧？
This Success Criterion does not require that labels or instructions be correctly marked up, identified, or associated with their respective controls.
好烦人，这里没有答案！
事实上，它让我们回到了 1.3.1，我们已经看过并确定没有明确的答案。
它还向我们指出了 4.1.2 - 也许我们会根据该标准看一下？
结果：不相关
4.1.2
对，一定是这个！它至少在正确的轨道上开始！
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined;
现在的关键部分是“以编程方式确定”。
好的，那么 "programmatically determined" 的定义是什么？
determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities
好吧，现在我们可能会有所作为。不同的用户代理和辅助技术能否提取占位符信息？这是一种有效的标记技术吗？
结果：仍然没有确定的答案
这是我们最终找到相关 WCAG 推荐的地方（或者我们找到了吗？）
成功标准 2.5.3：名称中的标签
2.5.3 label in name肯定是我们要找的确认。
Note that placeholder text within an input field is not considered an appropriate means of providing a label. The HTML5 specification states The placeholder attribute should not be used as an alternative to a . However, it is worth noting that "label" in that HTML5 statement is in code brackets and links to the label element. For the purposes of this Label in Name Success Criterion, "label" is not used in such a programmatic sense but is simply referring to a text string in close visual proximity to a component. As such, in the absence of any other nearby text string (as described in the preceding list), if an input contains placeholder text, such text may be a candidate for Label in Name. This is supported both through the accessible name calculation (discussed later) and from the practical sense that where a visible label is not otherwise provided, it is likely that a speech-input user may attempt to use the placeholder text value as a means of interacting with the input.
在所有那些杂乱无章的内容中（你可以看出我厌倦了阅读那些令人费解和不清楚的指南。）它说了一些有趣的事情。
“如果输入包含占位符文本，则此类文本可能是名称中标签的候选者。”
这样我们就有了一个“以编程方式确定”的控件名称。 （见下一个标题）
上面段落的旁注： “请注意，输入字段中的占位符文本不被视为提供标签的适当方式”部分。会让您认为占位符作为标签无效。
它还声明“HTML5 规范声明占位符属性不应用作 <label> 的替代项。”
现在对我来说这足以说服您使用标签。
然而，WCAG 再次指出网页应该是“有效的 HTML”（在 SC 4.1.1 - Parsing 之下）。
也是<input> 的占位符有效 HTML？嗯答案（根据W3C validator是肯定的！下面是有效的HTML！
<html lang="en">
<head>
<title>test</title>
</head>
<body>
<form>
<input placeholder="test"/>
</form>
</body>
</html>
所以如果它是有效的，我会说技术上是可以接受的。
可访问的名称计算
我得到 side-tracked 一秒钟。我说的是 placeholder 属性是可访问名称计算的有效候选者。
Here it is, the accessible name computation for an <input>。相关点是第 4 点：
- Otherwise use the control's placeholder attribute.
好的 placeholder 对“程序可确定”有效，但标签是否必须可见？
有趣的是，您不必为 1.1.1、1.3.1 和 4.1.2 设置可见标签，因此我们不能使用该参数来表示需要实际标签。
取自H44: Using label elements to associate text labels with form controls
This technique (associating a label with an input) is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS.
话虽如此，下一句....
However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
但在3.3.2中虽然必须可见，但不一定要正确标记（记住，我早就说过了！）。
所以我在 WCAG 中找到了所有相关信息，结果仍然模糊，但话虽如此，我确实有一个结论要告诉你！
结论
WCAG 中没有任何地方明确声明占位符不能用作标签。
WCAG also states that a title can be used to label an input 这比占位符还糟糕。
我可能在某个地方漏掉了一个关键的句子，但从我读到的内容来看，我相信（非常令人惊讶！！）它在以下情况下有效WCAG 2.1 仅在 <input>.
显然正如我多次声明的那样不要仅在输入中使用占位符因为很多用户无法访问它（患有焦虑症或学习困难的人真的很讨厌带有占位符标签的输入，因为当他们键入时标签会消失，因此他们无法检查他们是否填写了正确的字段而不删除所有内容），某些屏幕 reader 和浏览器组合不适用于它们等
真正的简短回答：满足所有成功标准是不够的
2.5.3: Label in Name 指出占位符可能是“名称中的标签”的候选者。
这并不意味着这会满足3.3.2 Labels or Instructions。
While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels.
SC 3.3.2 does require a visible label（文本或图标，例如带有放大镜按钮的搜索表单）或说明.
on the WCAG github 也讨论了“隐藏标签”。
如果您反对占位符不是“隐藏的”，那么一旦该字段被填充，情况就不再如此，例如在使用屏幕放大镜时可能难以理解其含义）。它还受浏览器自动填充功能的影响。
所以使用占位符，事实上，并不违反 WCAG，它只是不够：当占位符不可见时，2.5.3 SC 将不适用，3.3.2 将失败，除非说明或其他技术是使用过。