Multi-Thumb Slider Example: Editorial Revisions to Prep for Review

For issue #124, modified examples/slider/multithumb-slider.html: * Revise wording of introduction. * Fix spelling in aria-label values. * Revise wording in roles, states, and properties. * Fix typos.
w3c · Nov 7, 2017 · 84d3bd8 · 84d3bd8
1 parent 951e018
commit 84d3bd8
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/examples/slider/multithumb-slider.html b/examples/slider/multithumb-slider.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>Horizontal Slider Example | WAI-ARIA Authoring Practices 1.1</title>
+  <title>Horizontal Multi-Thumb Slider Example | WAI-ARIA Authoring Practices 1.1</title>
 
   <!--  Core js and css shared by all examples; do not modify when using this template. -->
   <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -19,11 +19,15 @@
   <main>
     <h1>Horizontal Multi-Thumb Slider Example</h1>
     <p>
-      Following is an example of a multi-thumb slider that demonstrates the
-      <a href="../../#slidertwothumb">slider (Multi-Thumb) design pattern.</a>
-      The example illustrates a typical price range selector found on travel websites.  
-      Change the desired price range by moving the arrows for the maximum and minumum price.
-      The price labels on either end of the slider will update as you move the corresponding thumb.
+      <strong>NOTE:</</strong> Please provide feedback on this example page in
+      <a href="https://github.com/w3c/aria-practices/issues/520">issue 520.</a>
+    </p>
+    <p>
+      The below example section includes a slider for setting a price range that demonstrates the
+      <a href="../../#slidertwothumb">multi-thumb slider design pattern.</a>
+      Users set a price range by moving the arrows (thumbs).
+      Each slider has two thumbs: one for the minimum price and one for the maximum price.
+      The price labels at the ends of the slider update as their corresponding thumbs are moved.
     </p>
     <p>Similar examples include: </p>
     <ul>
@@ -40,9 +44,7 @@ <h1>Horizontal Multi-Thumb Slider Example</h1>
        <h2 id="ex_label">Example</h2>
           <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
           <div id="ex1">
-
               <h3>Hotel Price Range</h3>
-
               <div class="aria-widget-slider">
                 <div class="rail-label min">
                   0
@@ -57,7 +59,7 @@ <h3>Hotel Price Range</h3>
                     aria-valuenow="100" 
                     aria-valuetext="$100"
                     aria-valuemax="400" 
-                    aria-label="Hotel Minimim Price"/>
+                    aria-label="Hotel Minimum Price"/>
                   <img id="maxPriceHotel"
                     src="images/max-arrow.png" 
                     role="slider" 
@@ -73,9 +75,7 @@ <h3>Hotel Price Range</h3>
                   0
                 </div>
               </div>
-
               <h3>Flight Price Range</h3>
-
               <div class="aria-widget-slider">
               <div class="rail-label min">
                 0
@@ -88,7 +88,7 @@ <h3>Flight Price Range</h3>
                     aria-valuenow="100" 
                     aria-valuetext="$100"
                     aria-valuemax="250" 
-                    aria-label="Flight Minimim Price">
+                    aria-label="Flight Minimum Price">
                 <img src="images/max-arrow.png" 
                   role="slider" 
                   tabindex="0" 
@@ -103,7 +103,6 @@ <h3>Flight Price Range</h3>
                 0
               </div>
               </div>
-
           </div>
           <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
     </section>
@@ -177,7 +176,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             <td>
               <ul>
                 <li>Identifies the element as a slider.</li>
-                <li>Set on the <code>div</code> that represents as the movable thumb because it is the operable element that represents the slider value.</li>
+                <li>Set on the the movable thumb because it is the operable element that receives focus and represents the slider value.</li>
               </ul>
             </td>
           </tr>
@@ -194,7 +193,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
           <tr>
             <td></td>
             <th scope="row">
-              <code>aria-valuemax=<q>270</q></code>
+              <code>aria-valuemax=<q>NUMBER</q></code>
             </th>
             <td>
               <code>div</code>
@@ -204,7 +203,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
           <tr>
             <td></td>
             <th scope="row">
-              <code>aria-valuemin=<q>0</q></code>
+              <code>aria-valuemin=<q>NUMBER</q></code>
             </th>
             <td>
               <code>div</code>
@@ -239,11 +238,12 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
             <td>
               <code>div</code>
             </td>
-            <td>A label identifying the function of the slider, in this case "Minimum Price" or "Maximum Price".</td>
+            <td>A label identifying the purpose of the slider, e.g., <q>Hotel Minimum Price</q>.</td>
           </tr>
         </tbody>
       </table>
     </section>
+
   <section>
         <h2>Javascript and CSS Source Code</h2>
         <ul>