Address comments and fix spelling

Author: zcorpan

aria-practices.html

@@ -4074,7 +4074,7 @@ <h5>Naming Tables and Figures with Captions</h5>
 &lt;/figure></code></pre>
           <p>
             Like with <code>table</code> elements, if a <code>figure</code> is not named using <code>aria-label</code> or <code>aria-labelledby</code>, the content of the <code>figcaption</code> element will be used as the accessible name.
-            However unlike <code>table</code> elements, if the <code>figcaption</code> element is not used for the name, it does not become an accessible description unless it is referenced by <code>aria-describedby</code>.
+            However, unlike <code>table</code> elements, if the <code>figcaption</code> element is not used for the name, it does not become an accessible description unless it is referenced by <code>aria-describedby</code>.
             Nevertheless, assistive technologies will render the content of a <code>figcaption</code> regardless of whether it is used as a name, description, or neither.
           </p>
           <p>Using the <code>caption</code> element to name a <code>table</code> element, or a <code>figcaption</code> element to name a <code>figure</code> element, satisfies <a href="#naming_rule_visible_text">Rule 2: Prefer Visible Text</a> and <a href="#naming_rule_native_techniques">Rule 3: Prefer Native Techniques</a>.</p>
@@ -6282,7 +6282,7 @@ <h3>Indicating sort order with <code>aria-sort</code></h3>
   <section id="aria-level">
     <h2>Describing Hierarchical Structure with <code>aria-level</code></h2>
     <p>When elements have a hierarchical relationship, such as headers of sections or data in tree structures, <code>aria-level</code> is used to communicate the hierarchy between elements to assistive technologies. The value of <code>aria-level</code> is numeric, with <code>1</code> indicating the top level of the structure. The number increases for each level of nesting.</p>
-    <p>Do not use <code>aria-level</code> when the DOM structure already accurately represents the elements' hierarchical relationships.</p>
+    <p>Do not use <code>aria-level</code> when the DOM structure already accurately represents the elements' hierarchical relationships. For example, a nested <code>ul</code> list structure does not need explicit <code>aria-level</code>.</p>
     <p>The <code>aria-level</code> attribute can be used on the following roles:</p>
     <ul>
       <li><code>heading</code></li>
@@ -6292,7 +6292,7 @@ <h2>Describing Hierarchical Structure with <code>aria-level</code></h2>
     </ul>
     <section id="aria-level_heading_role">
       <h3><code>heading</code> Role</h3>
-      <p>Used together, the <code>aria-level</code> attribute and <code>heading</code> role will be treated the same by assistive technologies as the native HTML header elements: <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code>. Do not use attribute <code>aria-level</code> and <code>heading</code> when a native HTML element can be used.</p>
+      <p>Used together, the <code>aria-level</code> attribute and <code>heading</code> role will be treated the same by assistive technologies as the native HTML heading elements: <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code>. Do not use the <code>aria-level</code> attribute and the <code>heading</code> role when a native HTML element can be used.</p>
       <p>This example uses the <code>heading</code> role and <code>aria-level</code> attribute to communicate levels of headings for a graph created with an SVG. The headings "Deciduous Trees" and "Evergreen Trees" are both subheadings to "Total Trees".</p>
       <pre><code>&lt;svg width="1000" height="1000"&gt;
   &lt;text x="10" y="10" role="header" aria-level="1"&gt;Total Trees:&lt;/text&gt;
@@ -6304,7 +6304,7 @@ <h3><code>heading</code> Role</h3>
 
       <section id="aria-level_heading_role_remediation">
         <h4>Remediation Uses Cases</h4>
-        <p>In rare scenarios, legacy code cannot be converted to using HTML header elements. In these cases, the <code>aria-level</code> attribute and the <code>heading</code> role can be added to the website's header elements to communicate to assitive technologies that those elements should be treated like a native HTML section heading element.</p>
+        <p>In rare scenarios, legacy code cannot be converted to using HTML header elements. In these cases, the <code>aria-level</code> attribute and the <code>heading</code> role can be added to the web site's heading elements to communicate to assistive technologies that those elements should be treated like a native HTML section heading element.</p>
         <p>For example, "Definition of a Room" is a subsection of "Housing Specification":</p>
         <pre><code>&lt;div role="heading" aria-level="1" class="header-big"&gt;Housing Specification&lt;/div&gt;
 &lt;div role="section" aria-labelledby="room-definition"&gt;
@@ -6324,7 +6324,7 @@ <h4>Remediation Uses Cases</h4>
 
     <section id="aria-level_listitem_role">
       <h3><code>listitem</code> role</h3>
-      <p>The <code>aria-level</code> attribute can be used on elements with <code>listitem</code> role to represent list subitems when the structure of the DOM tree does not imply the intended level of nesting. For example, to quote a item in a nested to-do list, use the 'aria-level' attribute on the list items.</p>
+      <p>The <code>aria-level</code> attribute can be used on elements with <code>listitem</code> role to represent list subitems when the structure of the DOM tree does not imply the intended level of nesting. This is a rare scenario, however. For example, consider that you want to <em>quote</em> a single item from a large nested to-do list. Instead of using nested <code>ul</code> elements until the right level of nesting is reached, the <code>aria-level</code> attribute on the list item can be used, as follows:</p>
       <pre><code>&lt;blockquote&gt;
 &lt;ul&gt;
   &lt;li aria-level="2"&gt;Wash Dishes&lt;/li&gt;
@@ -6336,8 +6336,8 @@ <h3><code>listitem</code> role</h3>
 
     <section id="aria-level_treeitem_role">
       <h3><code>treeitem</code> role</h3>
-      <p>The attribute <code>aria-level</code> can be used on elements with role <code>treeitem</code> to explicitly set the level of items within the <a href="#TreeView">Tree View Design Pattern</a>.</p>
-      <p>The computed <code>aria-level</code> of a <code>treeitem</code> within a tree is based on the number of 'group' role elements in the ancestor chain between the treeitem and the tree role, where the top level <code>treeitems</code> are <code>aria-level</code> 1. In the following example of a discussion board with nested replies, the top level post "What color should we paint the bike shed?" has an implicit <code>aria-level='1'</code>. The first reply has an implicit <code>aria-level='2'</code>, the response to that first reply has an implicit <code>aria-level='3'</code>.</p>
+      <p>In some implementations of the <a href="#TreeView">Tree View Design Pattern</a>, authors might need to explicitly declare the <code>aria-level</code> attribute.</p>
+      <p>The computed <code>aria-level</code> of a <code>treeitem</code> within a tree is based on the number of <code>group</code> role elements in the ancestor chain between the <code>treeitem</code> and the <code>tree</code> role, where the top-level <code>treeitem</code>s are <code>aria-level</code> 1. In the following example of a discussion board with nested replies, the top-level post "What color should we paint the bike shed?" has an implicit <code>aria-level='1'</code>. The first reply has an implicit <code>aria-level='2'</code>, the response to that first reply has an implicit <code>aria-level='3'</code>.</p>
       <pre><code>&lt;ul role='tree'&gt;
   &lt;li role='treeitem'&gt;
   What color should we paint the bike shed?
@@ -6354,7 +6354,7 @@ <h3><code>treeitem</code> role</h3>
   &lt;/li&gt;
 &lt;/ul&gt;
 </code></pre>
-      <p>To override the <code>aria-level</code> calculated from the number of <code>group</code> role parents, set <code>aria-level</code> explicitly. Setting <code>aria-level</code> explictly might be necessary if only part of a tree is loaded and the implicity calculations cannot account for the missing part of the tree.</p>
+      <p>To override the <code>aria-level</code> calculated from the number of <code>group</code> role parents, set <code>aria-level</code> explicitly. Setting <code>aria-level</code> explicitly might be necessary if only part of a tree is loaded and the implicit calculations cannot account for the missing part of the tree.</p>
       <pre><code>&lt;ul role='tree'&gt;
   &lt;li role='treeitem' aria-level='1'&gt;
   What color should we paint the bike shed?