用于 HTML5 输入的占位符 VS 标签

问题描述

我正在制作一个带有多个输入的表单，我需要在输入本身内部提供表单元素的标签，我正在使用这样的

I'm Making a form with multiple inputs where I need to give lable of form element inside input itself and I'm using like this

示例

<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">
</form>

以上代码在 W3C 验证器中对 HTML5 有效.

And above code is Valid in W3C validator for HTML5.

Label 在 HTML 5 中不需要吗?

Does Label not require in HTML 5?

如果我使用 HTML5 Placeholder 在 input 中显示标签，可以吗?

If I'm using HTML5 Placeholder to show label inside input is that ok?

是否仍需要 label 和 placeholder 才能使其与屏幕阅读器兼容?

Does label still required along with placeholder to make it screen reader compatible?

推荐答案

HTML 验证器不会检查可访问性.有效的 HTML 仍然无法访问或不是最佳的.标签仍然很重要，HTML5 placeholder 不能替代它们.请参阅H44:使用标签元素将文本标签与表单控件关联href="http://www.w3.org/TR/WCAG-TECHS/Overview.html" rel="noreferrer">WCAG 2 技术.如果您的布局要求标签对视力正常的用户不可见，您可以始终包含标签，但将其移出屏幕并使用负边距/文本缩进.

HTML validators will not check accessibility. Valid HTML can still be inaccessible or less than optimal. Labels are still important and HTML5 placeholder is not a replacement for them. See H44: Using label elements to associate text labels with form controls in the WCAG 2 Techniques. If your layout requires that the label not be visible to sighted users, you can always include the label but move it offscreen with negative margins/text-indent.

更新:

一些 关于 placeholder 的测试结果和一个关于使用 placeholder 没有 label.

这篇关于用于 HTML5 输入的占位符 VS 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！