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

本文介绍了用于 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="www.w3/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.