Question

我倾向于避免在功能目的之外使用ID。这让我想到了我的问题，当在表单中标记项目时，有多种方法。我一直这样做是为了避免身份证;但是，替代方法的专业人士和专家是什么？一种方式对浏览器的语义意义是否比另一种方式更多？可访问性如何在其中发挥作用？

我通常的实施方法：

<form role="form" action="#" method="post" name="form" novalidate>
  <label>
    <span>Search</span>
    <input role="search" type="search" placeholder="Search" name="s">
  </label>
  <button role="button" type="submit" name="s-btn">Search</button>
</form>

但是，您也可以使用for=""并为相应字段标记ID。显然，type="radio"和type="checkbox"更适合使用哪个，但它是否具有比上述更好的语义价值？

<form role="form" action="#" method="post" name="form" novalidate>
  <label for="s">Search</label>
  <input role="search" type="search" id="s" placeholder="Search" name="s">
  <button role="button" type="submit" name="s-btn">Search</button>
</form>

你甚至可以使用WAI-ARIA标记ID，如果它与for=""结合使用或者它是一种独立的标记方法吗？

<form role="form" action="#" method="post" id="Form" novalidate>
  <label id="s" for="sf">Search</label>
  <input role="search" aria-labelledby="s form" id="sf" type="search" placeholder="Search" name="s">
  <button role="button" aria-labelledby="form" type="submit" name="s-btn">Search</button>
</form>

我想这个问题是由于平衡可维护性，优化，语义和可访问性的永无止境的追求而引发的。

Answer 1

这两种方法，将控件嵌套到标签中（隐式）并使用id和属性（显式）具有不同的正面和负面，但是我从专业人士看到的当前趋势是从隐式和更多地转移到显式。

explicit允许在文档中提供更大的灵活性，而html5允许将表单控件放在文档中的任何位置，因此在这种情况下它们是相辅相成的。

隐式不能用于复选框和无线电，因为标签元素需要在输入表单控件之后，因此存在一个限制。隐含的几年前浏览器支持也很差，seems to still have trouble with screen readers。隐式确实增加了可访问性和可用性，因为标签的大小会增加表单控件的可单击表面区域。

wai-aria仍然没有完成，并且浏览器/屏幕阅读器支持也有问题，但这当然不应该阻止你在可能的情况下实现它。理想情况下，如果不支持，它将无声地失败（如html5输入与非html5支持浏览器），但我会谨慎在这里并警惕地测试。不同的支持也可以有一个屏幕阅读器/浏览器/用户代理读取两者，而不是寻求wai-aria，并默认为imp / exp标签。

语义：meh。问10个开发者，你会得到10个答案。但正确的答案是您正确使用该表单控件吗？是否正确标记？正确和正确的意义它将验证并通过可访问性测试？在您的个人情境中，在此用例中，您是否正确且正确地使用正确的控件/标签来表示您为用户提供的交互？只有你可以回答后者...如果你使用的是豪华校长，你也不应该有任何问题。

旁注：关于避免id，在这种情况下，id是最佳的，它们被用于功能......我假设表单控件正在提交时处理？关于你的预期用途的功能我可能是错的，但是如果你为wpo避开它们它们仍然是最佳的：你可以使用id，只是不要在你的样式表中定位它们。

表单标签的语义

1 个答案: