这是使用html角色的正确方法吗？

Question

如我所见，HTML5语义doctype中完全支持role属性。 我在诸如以下的JQuery选择器中使用了它：

<div role="inputForm">
  <div role="field">
    Name : <input type="text" role="name" />
  </div>
  <div role="field">
    Address : <textarea type="text" role="address"></textarea>
  </div>
  <div role="field">
    Country : <select role="country"></select>
  </div>
</div>

<script>
var inputForm = $("div[role='inputForm']");
var fields = $(inputForm.find("div[role='field']"));
var nameField = $(inputForm.find("input[role='name']"));
</script>

正如我所已知的，同样的属性正在使用中JqGrid ，网格插件JQuery 。

我认为这个选择器比基于类/ id的选择器更有效和模块化。 但是，这是在HTML5中正确使用角色属性吗？ 还是有进行这种设计的风险？

如果这种设计不支持/不建议作为HTML最佳实践，是否有任何方法可以实现相同目的？

我找不到此类用法的任何文章或支持的文档。

Answer 1

看来您应该使用id而不是角色（尽管不是您的role="field"属性的属性……这些应该是类）。

简而言之，您的角色属性值未按照WAI-ARIA规范的预期使用。

应该使用role属性为文档元素分配语义，并且Accessible Rich Internet Applications Suite（ARIA）定义了一组有限的有效值和适当值，以使Web内容和Web应用程序更易于访问。

有关有效角色属性值的详细列表，请参见W3C规范文档中的“角色模型”： http : //www.w3.org/TR/wai-aria/roles#abstract_roles

Answer 2

不它不是。 HTML5 定义 ：

根据ARIA规范中所述的要求，作者可以在HTML元素上使用ARIA role和aria-*属性，除非这些条件与下文所述的强本机语义冲突。

您的值inputForm和field 无效 。

如果正确使用了role属性，那么当然也可以将其用作CSS和JS中的钩子。

---

我认为这个选择器比基于类/ id的选择器更有效和模块化。

您的实际意图似乎是找到一个可以在多个（第三方）站点上使用的标识符，而不会造成名称冲突 。

您可以使用class ， id或data-*属性 。 为了避免发生冲突，您可以使用“稀有”前缀，例如您的域名（ example.com ）：

<div class="com-example-foo"></div> 
<div id="com-example-foo"></div> 
<div data-com-example="foo"></div> <!-- preferred, because the prefix is not part of the value -->

另一种可能性是将自定义词汇表与Microdata或RDFa一起使用 。 因为您可以使用自己的URI作为值，所以其他任何人都不太可能使用它们（除非您发布词汇表，并且对其他人有用；-)。