Editorial changes to accessibility features for clarity and brevity

examples/switch/switch-checkbox.html

@@ -78,19 +78,26 @@ <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>
 
-  <section>
     <section>
       <h2>Accessibility Features</h2>
       <ul>
-        <li>To help assistive technology users understand that the accessibility preferences are made of a group of two switches, the switches are wrapped in a <code>fieldset</code> element labeled with a <code>legend</code> element.</li>
-        <li>To provide a visual indication the labels can also be used to change the state of a switch, the background color is changed and a border appears when the pointer moves over the switch or the label.  Including the border insures people with visual impairments can perceive the target area in high contrast modes.</li>
-        <li>A visual text label (i.e. &quot;on&quot; and &quot;off&quot;) of the state of the switch is placed after the graphic indication of the state to make it easier for users with visual or cognitive impairments to understand the current state of the switch.<br/>
-        NOTE: CSS attribute selectors are used ensure synchronization of the visual states with the value of the <code>input[type=&quot;checkbox&quot;]:checked</code> property.</li>
-        <li>The graphical rendering of the switch state uses 2 pixel borders for the container, and a 2 pixel border on the circle indicating the on and off position of the switch.  There is 2 pixels of space between the container border and the border of the circle.  The use of spacing and borders insures the graphic will be visible and discernible in high contrast modes used by people with visual impairments.
+        <li>To help assistive technology users understand each switch belongs to a set of switches related to <q>Accessibility Preferences</q>, the switches are wrapped in a <code>fieldset</code> element labeled with a <code>legend</code> element.</li>
+        <li>
+          To provide a visual indication the labels can also be used to change the switch state, when the pointer moves over either the switch or the label, both the switch and label are treated with a border and background color change.
+          Note that the border treatment is necessary for the target area to be perceivable when browser or operating system high contrast settings are enabled.
+        </li>
+        <li>
+          A visual text label (<q>on</q> or <q>off</q>) of the state is rendered adjacent to the graphical state indicator to make understanding the state easier for users with visual or cognitive disabilities.<br/>
+          NOTE: To avoid redundant state announcement by screen readers, these labels are hidden from assistive technologies with <code>aria-hidden</code>, and CSS attribute selectors ensure the label display is synchronized with the value of the <code>input</code>.
+        </li>
+        <li>Spacing and borders are used to ensure the graphics will be visible and discernible when browser or operating system high contrast settings are enabled:
+          <ul>
+            <li>Two pixel borders are used for the switch state container and the circle indicating the on and off position of the switch.</li>
+            <li>There are 2 pixels of space between the container border and the border of the circle.</li>
+          </ul>
         </li>
       </ul>
     </section>
-  </section>
 
   <section>
     <h2 id="kbd_label">Keyboard Support</h2>