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

Question

我正在制作一个包含多个输入的表单，我需要在输入本身内添加一些表单元素，我就像这样使用

示例

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

以上代码在HTML5的W3C验证器中有效。

HTML 5中不需要Label吗？

如果我使用HTML5 Placeholder在input内显示标签，那可以吗？

label是否还需要placeholder才能使其与屏幕阅读器兼容？

Answer 1

HTML验证程序不会检查辅助功能。有效的HTML仍然无法访问或不是最佳。标签仍然很重要，HTML5 placeholder不能替代它们。请参阅H44: Using label elements to associate text labels with form controls中的WCAG 2 Techniques。如果您的布局要求视觉用户无法看到该标签，您可以随时添加标签，但在屏幕外移动时使用负边距/文本缩进。

<强>更新

部分test result on placeholder和discussion on the W3 Public HTML mailing list about using placeholder without label。

Answer 2

Placeholder不能代替Label所以我想屏幕阅读器应该存在或者至少设置title属性。 Ref

对于跨浏览器兼容性，您需要使用javascript。结帐http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。

Answer 3

从本质上讲，这取决于您页面的目标是什么：

Placeholders in Form Fields Are Harmful

我更喜欢“可能有害”……比如说我正在创造一个像在浏览器中运行的游戏那样的视听体验，使用标签会损害版图和视力障碍的人（或其他人） ）可能仍然无法享受游戏的乐趣。将游戏淡化到任何有障碍的人都可以享受的程度，这将要求我拥有一支至少由一个有每种障碍的人组成的团队，以确保每个人都能获得正确的体验。大部分将在大多数地方删除以适应，并且整个体验也会改变。

我认为这取决于您要实现的目标，您可以自行决定，但这肯定回答了我对此事的疑问