這是使用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作為值，所以其他任何人都不太可能使用它們（除非您發布詞匯表，並且對其他人有用；-)。