aria-practices.html and example pages: Cleanup typos (pull #1048)

Fix:
* typo: parrent -> parent
* typo: Tempature -> Temperature
* typo: atribute -> attribute
* typo: arbetrary -> arbitrary
* typo: monspace -> monospace
* typo: maxmimum -> maximum
* typo: Conversly -> Conversely
* typo: horzontal -> horizontal
* typo: tfooter -> tfoot
* typo: Indicies -> Indices

aria-practices.html

@@ -2354,8 +2354,8 @@ <h3>Slider (Multi-Thumb)</h3>
         with two or more thumbs that each set a value in a group of related values.
         For example, in a product search, a two-thumb slider could be used to enable users to set the minimum and maximum price limits for the search.
         In many two-thumb sliders, the thumbs are not allowed to pass one another, such as when the slider sets the minimum and maximum values for a range.
-        For example, in a price range selector, the maxmimum value of the thumb that sets the lower end of the range is limited by the current value of the thumb that sets the upper end of the range.
-        Conversly the minimum value of the upper end thumb is limited by the current value of the lower end thumb.
+        For example, in a price range selector, the maximum value of the thumb that sets the lower end of the range is limited by the current value of the thumb that sets the upper end of the range.
+        Conversely, the minimum value of the upper end thumb is limited by the current value of the lower end thumb.
         However, in some multi-thumb sliders, each thumb sets a value that does not depend on the other thumb values.
       </p>
 
@@ -2677,7 +2677,7 @@ <h3>Toolbar</h3>
             <li>In toolbars with multiple rows of controls, <kbd>Left Arrow</kbd> and <kbd>Right Arrow</kbd> can provide navigation that wraps from row to row, leaving the option of reserving vertical arrow keys for operating controls.</li>
           </ul>
         </li>
-        <li>Avoid including controls whose operation requires the pair of arrow keys used for toolbar navigation. If unavoidable, include only one such control and make it the last element in the toolbar. For example, in a horzontal toolbar, a textbox could be included as the last element.</li>
+        <li>Avoid including controls whose operation requires the pair of arrow keys used for toolbar navigation. If unavoidable, include only one such control and make it the last element in the toolbar. For example, in a horizontal toolbar, a textbox could be included as the last element.</li>
         <li>Use toolbar as a grouping element only if the group contains 3 or more controls.</li>
       </ul>
       <section class="notoc">
@@ -6022,7 +6022,7 @@ <h3>Using <code>aria-colcount</code> and <code>aria-colindex</code></h3>
         For example, specifying an invalid value for <code>aria-colindex</code> or setting it on some but not all cells in a row, could cause screen reader table reading functions to skip cells or simply stop functioning.
       </p>
       <section id="gridAndTableProperties_cols_contiguous">
-        <h4>Using <code>aria-colindex</code> When Column Indicies Are Contiguous</h4>
+        <h4>Using <code>aria-colindex</code> When Column Indices Are Contiguous</h4>
         <p>
           When all the cells in a row have column index numbers that are consecutive integers,
           <code>aria-colindex</code> can be set on the row element with a value equal to the index number of the first column in the set.
@@ -6063,7 +6063,7 @@ <h4>Using <code>aria-colindex</code> When Column Indicies Are Contiguous</h4>
 </pre>
       </section>
       <section id="gridAndTableProperties_cols_noncontiguous">
-        <h4>Using <code>aria-colindex</code> When Column Indicies Are Not Contiguous</h4>
+        <h4>Using <code>aria-colindex</code> When Column Indices Are Not Contiguous</h4>
         <p>
           When the cells in a row have column index numbers that are not consecutive integers, <code>aria-colindex</code> needs to be set on each cell in the row.
           The following example shows a grid for an online grade book where the first two columns contain a student name and subsequent columns contain scores.
@@ -6386,7 +6386,7 @@ <h3>
             <li> If <code>presentation</code> is applied to a <code>ul</code> or <code>ol</code> element, each child <code>li</code> element inherits the <code>presentation</code> role because ARIA requires the <code>listitem</code> elements to have the parent <code>list</code> element. So, the <code>li</code> elements are not exposed to assistive technologies, but elements contained inside of those <code>li</code> elements, including nested lists, are visible to assistive technologies. </li>
             <li>
               Similarly, if <code>presentation</code> is applied to a <code>table</code> element,
-              the descendant <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>tfooter</code>,
+              the descendant <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>tfoot</code>,
               <code>tr</code>, <code>th</code>, and <code>td</code>
               elements inherit role <code>presentation</code> and are thus not exposed to assistive technologies.
               But, elements inside of the <code>th</code> and <code>td</code> elements, including nested tables,  are exposed to assistive technologies.

examples/disclosure/disclosure-img-long-description.html

@@ -71,8 +71,8 @@ <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of
                 <th scope="col">Location</th>
                 <th scope="col">Approximate Date</th>
                 <th scope="col">Size of Army</th>
-                <th scope="col">Tempature C</th>
-                <th scope="col">Tempature F</th>
+                <th scope="col">Temperature C</th>
+                <th scope="col">Temperature F</th>
                 <th scope="col">Direction</th>
               </tr>
             </thead>
@@ -241,7 +241,7 @@ <h3 id="id_data_label">Data for Charles Minard's Chart of Napoleon's Invasion of
   <section>
     <h2>Accessibility Features</h2>
     <ol>
-    <li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS atribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
+    <li> The visual indication of expanded and collapsed states is synchronized with the value of <code>aria-expanded</code> using a CSS attribute selector and <code>:before</code> pseudo element that generates an image with the <code>content</code> property.</li>
       <li>The interactivity of the disclosure button is visually indicated on focus and hover:
         <ul>
           <li>The CSS <code>:focus</code> pseudo class is used to change the background and border colors.</li>

examples/grid/LayoutGrids.html

@@ -417,7 +417,7 @@ <h2>Other Features</h2>
       <dt>Whether focus can wrap to the first row in the next column or the last row in the previous column when <kbd>Down Arrow</kbd> and <kbd>Up Arrow</kbd> are pressed:</dt>
       <dd>
         The only condition where this wrapping is appropriate is when every cell in the grid belongs to a single logical set.
-        In other words, if presentation of all elements in a single row is logically equivalent to presenting the same elements in an arbetrary number of rows and columns,
+        In other words, if presentation of all elements in a single row is logically equivalent to presenting the same elements in an arbitrary number of rows and columns,
         then it is appropriate for <kbd>Down Arrow</kbd> and <kbd>Up Arrow</kbd> to behave as if all cells are in a single column.
         For instance, in example 1, all cells contain a navigation link.
         That set of six links could be presented in a single row, a single column, or divided into two rows of three or three rows of two; all these  presentations would be logically equivalent.
@@ -450,7 +450,7 @@ <h2 id="kbd_label">Keyboard Support</h2>
     <p>
       <strong>NOTE:</strong> The following table describes keyboard commands that move focus among grid cells.
       In the examples on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
-      So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.     
+      So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
     </p>
     <table aria-labelledby="kbd_label" class="def">
       <thead>

examples/toolbar/toolbar.html

@@ -142,7 +142,7 @@ <h2 id="ex_label">Example</h2>
             <ul role="menu" id="menu1" aria-label="Font Family">
               <li role="menuitemradio" aria-checked="true" style="font-family: sans-serif">Sans-serif</li>
               <li role="menuitemradio" aria-checked="false" style="font-family: serif">Serif</li>
-              <li role="menuitemradio" aria-checked="false" style="font-family: monspace">Monospace</li>
+              <li role="menuitemradio" aria-checked="false" style="font-family: monospace">Monospace</li>
               <li role="menuitemradio" aria-checked="false" style="font-family: fantasy">Fantasy</li>
               <li role="menuitemradio" aria-checked="false" style="font-family: cursive">Cursive</li>
             </ul>
@@ -203,7 +203,7 @@ <h3>Keyboard Features</h3>
         When any of the cut, copy and paste buttons are disabled they remain focusable to ensure screen reader users are aware of their presence.
         For additional guidance, see <a href="../../#kbd_disabled_controls">Focusability of disabled controls.</a>
       </li>
-      <li><kbd>Left Arrow</kbd> and <kbd>Right Arrow</kbd> navigate among elements in the toolbar so <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> are available to: 
+      <li><kbd>Left Arrow</kbd> and <kbd>Right Arrow</kbd> navigate among elements in the toolbar so <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> are available to:
         <ul>
           <li>Navigate among radios in the text alignment group. For instance, <kbd>Down Arrow</kbd> moves focus from last to first member in the group.</li>
           <li>Open the font menu button, which can also be opened with <kbd>Enter</kbd>.</li>
@@ -215,7 +215,7 @@ <h3>Focus Styling</h3>
     <ul>
       <li>
         When the toolbar has focus, the container element border is highlighted,
-        helping indicate that the container supports directional navigation with the arrow keys. 
+        helping indicate that the container supports directional navigation with the arrow keys.
       </li>
       <li>
         When a toolbar item has focus, its border is highlighted and the background color of the button also changes.
@@ -683,7 +683,7 @@ <h3 id="rps_label_3">Radio Group (Text Alignment)</h3>
             <td>
               <ul>
                 <li>Indicates the radio button is checked, i.e., the type of alignment currently applied to the text area.</li>
-                <li>Only one radio button in the group has <code>aria-checked</code> set to <code>true</code> at any given time.</li> 
+                <li>Only one radio button in the group has <code>aria-checked</code> set to <code>true</code> at any given time.</li>
               </ul>
             </td>
           </tr>
@@ -694,7 +694,7 @@ <h3 id="rps_label_3">Radio Group (Text Alignment)</h3>
             <td>
               <ul>
                 <li>Indicates the radio button is <strong>NOT</strong> checked.</li>
-                <li>All radio buttons in the group, except for one,  have <code>aria-checked</code> set to <code>false</code>.</li> 
+                <li>All radio buttons in the group, except for one,  have <code>aria-checked</code> set to <code>false</code>.</li>
               </ul>
             </td>
           </tr>

examples/treeview/treeview-2/treeview-2a.html

@@ -346,7 +346,7 @@ <h2>Accessibility Features</h2>
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
-          A tree item that can be expanded to reveal child items is called a parrent node.
+          A tree item that can be expanded to reveal child items is called a parent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
           An end node does not have any children.
           For a complete list of terms and definitions, see the

examples/treeview/treeview-2/treeview-2b.html

@@ -478,7 +478,7 @@ <h2>Accessibility Features</h2>
       <section>
         <h2>Terms Used to Describe Trees</h2>
         <p>
-          A tree item that can be expanded to reveal child items is called a parrent node.
+          A tree item that can be expanded to reveal child items is called a parent node.
           It is a closed node when the children are hidden and an open node when it is expanded.
           An end node does not have any children.
           For a complete list of terms and definitions, see the