简体   繁体   English

WCAG 2.0 H44-当文本框使用占位符文本时如何添加标签

[英]WCAG 2.0 H44 - How to add label when textbox uses placeholder text

For H44, complying with Success Criteria (1.1.1, 1.3.1, 3.3.2 and 4.1.2) requires me to add 'label's for input textboxes. 对于H44,要遵守成功标准(1.1.1、1.3.1、3.3.2和4.1.2),我需要为input文本框添加“标签”。 However, when the textbox's label text is within the textbox itself as a placeholder, how can we meeting these criteria? 但是,当文本框的标签文本作为占位符位于文本框本身内时,我们如何满足这些条件?

https://www.w3.org/TR/WCAG20-TECHS/H44.html https://www.w3.org/TR/WCAG20-TECHS/H44.html

For example, if you scroll to the footer/bottom of https://www.goorin.com/ , you'll see a textbox for subscribing to their email newsletter, and there is the placeholder text within the textbox "Enter your email address". 例如,如果滚动到https://www.goorin.com/的页脚/底部,您会看到一个用于订阅其电子邮件通讯的文本框,并且在文本框“输入您的电子邮件地址”中有占位符文本”。 This IS the label text. 这是标签文本。 I can't add an actual visible label without altering the design of the page/footer to have label text outside of the textbox? 我不能添加实际的可见标签,而无需更改页面/页脚的设计以使标签文本位于文本框之外? Even if I make the label hidden via CSS, it will not comply with 3.3.2. 即使我通过CSS隐藏了标签,也不符合3.3.2的要求。

Using the placeholder attribute for a label is specifically pointed out in the html spec as a bad thing to do. 在html规范中特别指出了将placeholder属性用于标签是一件不好的事情。 See the warning under the placeholder spec . 请参阅占位符规范下的warning Many screen readers will not read the placeholder. 许多屏幕阅读器不会读取占位符。 Its use is supposed to give a clue as to the format of the data you need to enter into the field, not the label of the field. 应该使用它来提示需要输入字段的数据格式,而不是字段的标签。

WCAG 3.3.2 says a label is typically needed but if the context of the <input> gives a clue as to what the label should be, then a visible label may not be needed, but you still need a hidden label for the screen reader. WCAG 3.3.2说,通常需要标签,但是如果<input>的上下文提供了有关标签应该是什么的线索,则可能不需要可见标签,但是对于屏幕阅读器,您仍然需要隐藏标签。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM