reflected feedback for APG meeting

-The label, WAI ARIA link to Authoring Practice Design Pattern for “pattern name” for all the examples. -add tabindex=-1info -keyboard feature as “arrow” from “up and down arrow” -removed “or generated content”
a11ydoer · Dec 14, 2015 · e768891 · e768891
1 parent c5b2d1d
commit e768891
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/practices/examples/button/button.html b/practices/examples/button/button.html
@@ -17,7 +17,7 @@ <h1>ARIA <code>button</code> role Example</h1>
 
     <h2>Creating Buttons using <code>role=button</code></h2>
 
-    <p> <a href="../../aria-practices.html#h-button">WAI-ARIA 1.1 : Button</a></p>
+    <p> <a href="../../aria-practices.html#h-button">Authoring Practice Design Patten for Button</a></p>
     <p><strong>Note:</strong> When using HTML, use the <code>&lt;button&gt;</code> element. It is recommended that authors not re-purpose other elements to create buttons.</p>
 
     <h2>Button Examples</h2>

diff --git a/practices/examples/checkbox/checkbox-1.html b/practices/examples/checkbox/checkbox-1.html
@@ -17,7 +17,7 @@ <h1>ARIA <code>Checkbox</code> </h1>
 
     <h2>Simple Checkbox</h2>
 
-    <p> <a href="../../aria-practices.html#h-checkbox">WAI-ARIA 1.1 : Checkbox</a></p>
+    <p> <a href="../../aria-practices.html#h-checkbox">Authoring Practice Design Patten for Checkbox</a></p>
     <h2 id="id_example">Simple Checkbox Example</h2>
         <div id="example">
            <div role="checkbox" aria-checked="false"  tabindex= "0" onkeydown="toggleCheckbox(event)" onclick="toggleCheckbox(event)" onfocus="focusCheckbox(event)" onblur="blurCheckbox(event)"><img src="./images/checkbox-unchecked-black.png" role="presentation"> Label 1</div> 

diff --git a/practices/examples/checkbox/checkbox-3.html b/practices/examples/checkbox/checkbox-3.html
@@ -12,7 +12,7 @@
   <body>
     <main role="main">
       <h1>ARIA <code>checkbox</code>: Mixed State Checkbox with Grouping Label</h1>
-    <p> <a href="../../aria-practices.html#h-checkbox">WAI-ARIA 1.1 : Checkbox</a></p>
+    <p> <a href="../../aria-practices.html#h-checkbox">Authoring Practice Design Patten for Checkbox</a></p>
       <ul>
           <li>This example uses the native HTML5 semantics for grouping (e.g. fieldset/legend) and is the preferred technique for accessibility.</li>
           <li>This example illustrates the use of a mixed state checkbox (e.g. all condiments) with a set of standard HTML checkboxes, <code>input type="checkbox"</code> (e.g, condiments options). </li>

diff --git a/practices/examples/link/link.html b/practices/examples/link/link.html
@@ -17,7 +17,7 @@ <h1>ARIA Example: <code>link</code> role</h1>
 
     <h2>Creating links using <code>role=link</code></h2>
 
-    <p> <a href="../../aria-practices.html#h-link">WAI-ARIA 1.1 : Link</a></p>
+    <p> <a href="../../aria-practices.html#h-link">Authoring Practice Design Patten for Link</a></p>
     <p><strong>Note:</strong> When using HTML use the <code>&lt;a&gt;</code> element. It is recommended that authors not re-purpose other elements to create links.</p>
     <h2 id="id1">Example Links</h2>
     <div id="example">

diff --git a/practices/examples/radio/radio.html b/practices/examples/radio/radio.html
@@ -13,10 +13,10 @@
     <main role="main">
       <h1>ARIA <code>radiogroup</code> and <code>radio</code> Example</h1>
 
-      <p> <a href="../../aria-practices.html#h-radiobutton">WAI-ARIA 1.1 : Radio Group</a></p>
+      <p> <a href="../../aria-practices.html#h-radiobutton">Authoring Practice Design Patten for Radio Group</a></p>
       <ul>
           <li>The <code>radiogroup</code> role defines a container for a set of ARIA radio buttons.</li>
-          <li>The radio button that is currently selected is identified using <code>aria-checked=“true”.</code></li>
+          <li>The radio button that is currently checked is identified using <code>aria-checked=“true”.</code></li>
           <li>Only one radio button can be selected at a time, all other radio buttons should define <code>aria-checked</code> as “false".</li> 
           <li>The label for the radio group is defined using <code>aria-labelledby</code> attribute. (e.g. “Pizza Crust”)</li>
           <li>The labels for the radio buttons are defined by the text nodes of each radio button. (e.g. “Regular Crust”, “Deep Dish”…)</li>
@@ -60,7 +60,8 @@ <h2 id="id_a11yfeature">Accessibility Feature</h2>
              <ul>
                 <li><code>div</code> element with role <code>radio</code> has <code>onkeydown</code> event to support keyboard activation of the radio.</li>
                 <li><code>div</code> element with role <code>radio</code> has <code>tabindex="0"</code> to become part of the tab order of the page.</li>
-                <li><code>img</code> element is used to visually indicate the state of radio (e.g. checked, unchecked) to ensure the visual state will be visible when browsers or operating system use “High Contrast” settings by people with visual impairments. (Note: CSS background image techniques or generated content result in visual state disappearing when browsers or operating systems are configured to display high contrast themes.)</li>
+                <li>Each radio has <code>tabindex="-1"</code> except one.</li>
+                <li><code>img</code> element is used to visually indicate the state of radio (e.g. checked, unchecked) to ensure the visual state will be visible when browsers or operating system use “High Contrast” settings by people with visual impairments. (Note: CSS background image techniques result in visual state disappearing when browsers or operating systems are configured to display high contrast themes.)</li>
                 <li><code>setRadioButton</code> function uses <code>aria-checked</code> attribute to make sure the information communicated to asssitive tecnology is the same as the visual state. (e.g. <code>img </code>element)</li>
                 <li><code>onfocus</code>  and <code>onblur</code> event handlers on <code>radio</code> support visual focus styling for keyboard only users.</li>
               </ul>
@@ -79,7 +80,7 @@ <h2 id="id_kbd">Keyboard Support</h2>
             <td>Moves keyboard focus to radiogroup.</td>
           </tr>
           <tr>
-            <td>Up and Down arrow</td>
+            <td>Arrow</td>
             <td>Moves up and down radio options.</td>
           </tr>
         </tbody>