Structural Roles section: draft 2

For issue #700:
* Added explanation of implicit semantics
* Made list of circumstances for when using ARIA instead of HTML native is OK
* Added 11 missing structural roles.
* Replaced list of structural roles with table that lists HTML equivalents

aria-practices.html

@@ -4498,37 +4498,69 @@ <h2>Roles That Automatically Hide Semantics by Making Their Descendants Presenta
 
   <section id="structural_roles">
     <h2>Structural Roles</h2>
-    <p>ARIA provides roles which structure and organize content in a page.
-      Generally, if using a host language which provides an element with equivalent semantics, 
-      authors should avoid using these structural roles unless using the structural role to retrofit 
-      legacy content when it would be cost prohibitive to alter the underlying DOM.
-      @@ Add Web Components use case here @@
-      The following structural roles are defined.
-      <ul>
-          <li>article</li>
-          <li>blockquote</li>
-          <li>caption</li>
-          <li>definition</li>
-          <li>directory</li>
-          <li>document</li>
-          <li>feed</li>
-          <li>figure</li>
-          <li>group</li>
-          <li>heading</li>
-          <li>img</li>
-          <li>list</li>
-          <li>listitem</li>
-          <li>math</li>
-          <li>note</li>
-          <li>paragraph</li>
-          <li>separator (when not focusable)</li>
-          <li>term</li>      
-        </ul>
+    <p>
+      ARIA provides a set of roles that convey the accessibility semantics of structures on a page.
+      These roles express the meaning that is conveyed by the layout and appearance of elements that organize and structure content, such as headings, lists, and tables.
     </p>
-
+    <p>
+      some host languages, such as HTML, include elements that express the same  semantics as an ARIA role. 
+      For instance, the HTML <code>&lt;p&gt;</code> element is mapped to accessibility APIs in exactly the same way as <code>&lt;div role="paragraph"&gt;</code>.
+      The ARIA and HTML specifications refer to this mapping of HTML elements to ARIA attributes as implied semantics, i.e., the implied ARIA role of the HTML <code>&lt;p&gt;</code> element is <code>paragraph</code>.
+    </p>
+    <p>
+      When developing HTML, it is important to use native HTML elements where ever possible. 
+      Do not use an ARIA role or property if it is possible to use an HTML element that has equivalent semantics.
+      Circumstances where it is appropriate to use ARIA attributes instead of equivalent HTML are:
+    </p>
+    <ol>
+      <li>When the HTML element cannot be styled in a way that meets visual design requirements.</li>
+      <li>When testing reveals that the ARIA equivalent is better supported by browsers or assistive technologies.</li>
+      <li>When remediating or retrofitting legacy content and altering the underlying DOM to use the HTML would be cost prohibitive.</li>
+      <li>When the implicit semantics of the HTML elements needed to assemble a custom web conponent do not convey the most appropriate accessibility semantics.</li>
+    </ol>
+    <p>The following table lists all structural roles defined in ARIA 1.2.</p>
+    <table class="widget-features">
+      <caption>ARIA structural roles</caption>
+      <thead>
+        <tr>
+          <th>ARIA Role</th>
+          <th>HTML Equivalent</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><th>article</th><td>article</td></tr>
+        <tr><th>application</th><td>No equivalent element</td></tr>
+        <tr><th>blockquote</th><td>blockquote</td></tr>
+        <tr><th>caption</th><td>caption</td></tr>
+        <tr><th>cell</th><td>td</td></tr>
+        <tr><th>columnheader</th><td>th</td></tr>
+        <tr><th>definition</th><td>dd</td></tr>
+        <tr><th>directory</th><td>No equivalent element</td></tr>
+        <tr><th>document</th><td>No equivalent element</td></tr>
+        <tr><th>feed</th><td>No equivalent element</td></tr>
+        <tr><th>figure</th><td>figure</td></tr>
+        <tr><th>group</th><td>No equivalent element</td></tr>
+        <tr><th>heading with aria-level="N" where N is 1, 2, 3, 4, 5, or 6</th><td>h1, h2, h3, h4, h5, h6</td></tr>
+        <tr><th>img</th><td>img</td></tr>
+        <tr><th>list</th><td>ul, ol</td></tr>
+        <tr><th>listitem</th><td>li</td></tr>
+        <tr><th>math</th><td>No equivalent element</td></tr>
+        <tr><th>none</th><td>No equivalent element</td></tr>
+        <tr><th>note</th><td>No equivalent element</td></tr>
+        <tr><th>presentation</th><td>No equivalent element</td></tr>
+        <tr><th>paragraph</th><td>p</td></tr>
+        <tr><th>row</th><td>tr</td></tr>
+        <tr><th>rowgroup</th><td>tbody, thead, tfoot</td></tr>
+        <tr><th>rowheader</th><td>th</td></tr>
+        <tr><th>separator (when not focusable)</th><td>hr</td></tr>
+        <tr><th>table</th><td>table</td></tr>
+        <tr><th>term</th><td>dfn, dt</td></tr>      
+        <tr><th>toolbar</th><td>No equivalent element</td></tr>
+        <tr><th>tooltip</th><td>No equivalent element</td></tr>
+      </tbody>
+    </table>
   </section>
 
-
   <section id="appendices" class="appendix">
     <h2>Appendices</h2>