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的{{1}}网格插件使用了相同的属性。

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

如果这种设计不支持/推荐为HTML最佳实践，有没有办法实现同样的目标？

我找不到任何文章或支持的文件用于此类用途。

Answer 1

看来你应该使用id而不是role（虽然不是你的role="field"属性......那些应该是类。）

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

角色属性应该用于为文档元素分配语义，并且可访问富Internet应用程序套件（ARIA）定义了一组有限且有效的值，以使Web内容和Web应用程序更易于访问。

可以在角色模型的W3C规范文档中找到有效角色属性值的详尽列表：http://www.w3.org/TR/wai-aria/roles#abstract_roles

Answer 2

不，不是。 HTML5 defines：

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

您的值inputForm和field为not valid。

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

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

您的实际意图似乎是找到可在多个（第三方）网站上使用的标识符，而不存在name collisions的风险。

您可以使用class，id或data-* attributes。为了不太可能发生冲突，您可以使用“稀有”前缀，例如您的域名（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 or RDFa的自定义词汇表。由于您可以使用自己的URI作为值，因此其他人不太可能使用这些（除非您发布词汇表并且对其他人有用; - ））。

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

2 个答案: