diff --git a/examples/tabs/tabs-1/tabs.html b/examples/tabs/tabs-1/tabs.html
index 3ed2d23484..e1b3fe2401 100644
--- a/examples/tabs/tabs-1/tabs.html
+++ b/examples/tabs/tabs-1/tabs.html
@@ -7,48 +7,57 @@
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
     <link href="../../css/core.css" rel="stylesheet">
     <link href="../../css/table.css" rel="stylesheet">
+    <script src="../../js/examples.js" type="text/javascript"></script>
 
     <!--  js and css for this example. -->
     <link href="css/tabs.css" rel="stylesheet">
+    
+    
   </head>
   <body>
     <main>
       <h1>Tabs With Automatic Activation</h1>
+      <p>
+        Provide feedback on updates to this page in 
+        <a href="https://github.com/w3c/aria-practices/issues/278">issue 278.</a>
+      </p>
       <p>
           This example section demonstrates a tabs widget that implements the  <a href="../../../#tabpanel">design pattern for tabs</a>.
-          In this example panels are automatically activated when its tab receives focus.
+          In this example,  a tab is automatically activated and its associated panel is displayed when the tab receives focus.
+          Tabs should only be automatically activated in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM.
+          For additional guidance, see <a href="../../../#kbd_selection_follows_focus">Deciding When to Make Selection Automatically Follow Focus</a>.
       </p>
       <p>Similar examples include: </p>
       <ul>
         <li><a href="../tabs-2/tabs.html">Tabs With Manual Activation</a>: A tabs widget where users activate a tab and display its panel by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.</li>
       </ul>
-
+      
       <section>
         <h2 id="ex_label">Example</h2>
-        <div  aria-labelledby="ex_label" role="region">
-          <div id="ex1">
-            <div class="tabs">
-              <div role="tablist">
-                <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
-                <button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
-                <button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
-              </div>
+        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+        <div id="ex1">
+          <div class="tabs">
+            <div role="tablist" aria-label="Entertainment">
+              <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">Nils Frahm</button>
+              <button role="tab" aria-selected="false" aria-controls="helios-tab" id="helios" tabindex="-1">Helios</button>
+              <button role="tab" aria-selected="false" aria-controls="complexcomplex" id="complex" tabindex="-1" data-deletable>Joke</button>
+            </div>
 
-              <div role="tabpanel" id="nils-tab" aria-labelledby="nils">
-                <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
-              </div>
+            <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils">
+              <p>Nils Frahm is a German musician, composer and record producer based in Berlin. He is known for combining classical and electronic music and for an unconventional approach to the piano in which he mixes a grand piano, upright piano, Roland Juno-60, Rhodes piano, drum machine, and Moog Taurus.</p>
+            </div>
 
-              <div role="tabpanel" id="helios-tab" aria-labelledby="helios" hidden>
-                <p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
-              </div>
+            <div tabindex="0" role="tabpanel" id="helios-tab" aria-labelledby="helios" hidden>
+              <p>Helios (Keith Kenniff) is an American composer, multi-instrumentalist, and electronic music producer. He composes ambient/electronic music under the moniker Helios and post-classical piano music under Goldmund. He is also one half of the indie band Mint Julep, and ambient project "A Pale Fire". Keith is also a composer for film, television, dance and performance art. In 2010 he created the record label Unseen.</p>
+            </div>
 
-              <div role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
-                <p>Fear of complicated buildings:</p>
-                <p>A complex complex complex.</p>
-              </div>
+            <div tabindex="0" role="tabpanel" id="complexcomplex" aria-labelledby="complex" hidden>
+              <p>Fear of complicated buildings:</p>
+              <p>A complex complex complex.</p>
             </div>
           </div>
         </div>
+        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
       </section>
 
       <section hidden>
@@ -74,82 +83,207 @@ <h2 id="kbd_label">Keyboard Support</h2>
           <tbody>
             <tr>
               <th><kbd>tab</kbd></th>
-              <td>Moves focus to the active tab or first focusable in the tab panel.</td>
+              <td>
+                <ul>
+                  <li>When the tab list is receiving focus, places focus on the active <code>tab</code> element .</li>
+                  <li>When the tab list contains the focus, moves focus to the <code>tabpanel</code> element.</li>
+                </ul>
+              </td>
             </tr>
             <tr>
-              <th><kbd>left arrow</kbd></th>
-              <td>Moves focus to the previous tab.</td>
+              <th><kbd>right arrow</kbd></th>
+              <td>
+                <ul>
+                  <li>Moves focus to the next tab.</li>
+                  <li>If focus is on the last tab, moves focus to the first tab.</li>
+                  <li>Activates the newly focused tab.</li>
+                </ul>
+              </td>
             </tr>
             <tr>
-              <th><kbd>right arrow</kbd></th>
-              <td>Moves focus to the next tab.</td>
+              <th><kbd>left arrow</kbd></th>
+              <td>
+                <ul>
+                  <li>Moves focus to the previous tab.</li>
+                  <li>If focus is on the first tab, moves focus to the last tab.</li>
+                  <li>Activates the newly focused tab.</li>
+                </ul>
+              </td>
             </tr>
             <tr>
               <th><kbd>home</kbd></th>
-              <td>Moves focus to the first tab.</td>
+              <td>Moves focus to the first tab and activates it.</td>
             </tr>
             <tr>
               <th><kbd>end</kbd></th>
-              <td>Moves focus to the last tab.</td>
-            </tr>
-            <tr>
-              <th><kbd>delete</kbd></th>
-              <td>If deletion on the selected tab is allowed this will that tab element and its associated tab panel.</td>
+              <td>Moves focus to the last tab and activates it.</td>
             </tr>
           </tbody>
         </table>
       </section>
 
       <section>
-        <h2 id="rps_label">ARIA Roles, Properties, and States</h2>
-        <!--  Update this table to describe the roles, properties, and states implemented in this example.  -->
+        <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
         <table aria-labelledby="rps_label">
           <thead>
             <tr>
-              <th>Role</th>
-              <th>Property/State</th>
-              <th>Element</th>
-              <th>Usage</th>
+              <th scope="col">Role</th>
+              <th scope="col">Attribute</th>
+              <th scope="col">Element</th>
+              <th scope="col">Usage</th>
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td>tablist</td>
+              <th scope="row">
+                <code>tablist</code>
+              </th>
+              <td></td>
+              <td>
+                <code>div</code>
+              </td>
+              <td>Indicates that the element serves as a container for a set of tabs.</td>
+            </tr>
+            <tr>
               <td></td>
+              <th scope="row">
+                <code>aria-label=<q>Entertainment</q></code>
+              </th>
+              <td>
+                <code>div</code>
+              </td>
+              <td>Provides a label that describes the purpose of the set of tabs.</td>
+            </tr>
+            <tr>
+              <th scope="row">
+                <code>tab</code>
+              </th>
+              <td></td>
+              <td>
+                <code>button</code>
+              </td>
+              <td>
+                <ul>
+                  <li>Indicates the element serves as a tab control.</li>
+                  <li>
+                    When focused, is automatically activated, causing its associated <code>tabpanel</code>
+                    to be displayed.
+                  </li>
+                  <li>
+                    Provides a title for its associated <code>tabpanel</code>.
+                  </li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
               <td></td>
+              <th scope="row">
+                <code>aria-selected=<q>true</q></code>
+              </th>
+              <td>
+                <code>button</code>
+              </td>
               <td>
                 <ul>
-                  <li>Serves as the container for the set of tabs.</li>
+                  <li>Indicates the tab control is activated and its associated panel is displayed.</li>
+                  <li>Set when a tab receives focus.</li>
                 </ul>
               </td>
             </tr>
             <tr>
-              <td>tab</td>
               <td></td>
+              <th scope="row">
+                <code>aria-selected=<q>false</q></code>
+              </th>
+              <td>
+                <code>button</code>
+              </td>
+              <td>
+                <ul>
+                  <li>
+                    Indicates the tab control is not active and its associated panel is <strong>NOT</strong>
+                    displayed.
+                  </li>
+                  <li>Set for all tab elements in the tab set except the focused tab.</li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
               <td></td>
+              <th scope="row">
+                <code>tabindex=<q>-1</q></code>
+              </th>
+              <td>
+                <code>button</code>
+              </td>
               <td>
                 <ul>
-                  <li>Contains title for tab panel, activates tab panel when activated.</li>
+                  <li>Removes the element from the page <kbd>Tab</kbd> sequence.</li>
+                  <li>Set when a tab is not selected so that only the selected tab is in the page <kbd>Tab</kbd> sequence.</li>
+                  <li>Since an HTML <code>button</code> element is used for the tab, it is not necessary to set <code>tabindex=<q>0</q></code> on the selected (active) tab element.</li>
+                  <li>This approach to managing focus is described in the section on <a href="../../../#kbd_roving_tabindex">roving tabindex</a>.</li>
                 </ul>
               </td>
             </tr>
             <tr>
-              <td>tabpanel</td>
               <td></td>
+              <th scope="row">
+                <code>aria-controls=<q>IDREF</q></code>
+              </th>
+              <td>
+                <code>button</code>
+              </td>
+              <td>
+                Refers to the <code>tabpanel</code> element associated with the tab.
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">
+                <code>tabpanel</code>
+              </th>
+              <td></td>
+              <td>
+                <code>div</code>
+              </td>
+              <td>
+                <ul>
+                  <li>Indicates the element serves as a container for tab panel content.</li>
+                  <li>
+                    Is hidden unless its associated <code>tab</code> control is activated.
+                  </li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
               <td></td>
+              <th scope="row">
+                <code>aria-labelledby=<q>IDREF</q></code>
+              </th>
+              <td>
+                <code>div</code>
+              </td>
               <td>
                 <ul>
-                  <li>Contains the tab’s associated content.</li>
+                  <li>
+                    Refers to the <code>tab</code> element that controls the panel.
+                  </li>
+                  <li>Provides an accessible name for the tab panel.</li>
                 </ul>
               </td>
             </tr>
             <tr>
               <td></td>
-              <td>aria-controls</td>
-              <td>element with <code>role</code> of <code>tab</code></td>
+              <th scope="row">
+                <code>tabindex=<q>0</q></code>
+              </th>
+              <td>
+                <code>div</code>
+              </td>
               <td>
                 <ul>
-                  <li></li>
+                  <li>Puts the tabpanel in the page <kbd>Tab</kbd> sequence.</li>
+                  <li>Facilitates movement to panel content for assistive technology users.</li>
+                  <li>Especially helpful if there are panels that do not contain a focusable element.</li>
                 </ul>
               </td>
             </tr>
@@ -159,7 +293,6 @@ <h2 id="rps_label">ARIA Roles, Properties, and States</h2>
 
       <section>
         <h2>Javascript and CSS Source Code</h2>
-        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
         <ul>
           <li>CSS: <a href="css/tabs.css" type="tex/css">tabs.css</a></li>
           <li>Javascript: <a href="js/tabs.js" type="text/javascript">tabs.js</a></li>
@@ -168,12 +301,9 @@ <h2>Javascript and CSS Source Code</h2>
 
       <section>
         <h2 id="sc1_label">HTML Source Code</h2>
-        <div id="sc1" aria-labelledby="sc1_label" role="region"></div>
-        <!--
-        The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
-        It renders the HTML in the preceding div with ID 'sc1'.
-        If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
-        -->
+        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+        <div id="sc1"></div>
+        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
         <script>
           sourceCode.add('sc1', 'ex1');
           sourceCode.make();
@@ -181,14 +311,13 @@ <h2 id="sc1_label">HTML Source Code</h2>
       </section>
 
     </main>
-
+    
     <nav>
       <!--  Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example.  -->
       <a href="../../../#tabpanel">Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
     </nav>
-
-
-    <script src="../js/examples.js" type="text/javascript"></script>
+    
     <script src="js/tabs.js" type="text/javascript"></script>
+    
   </body>
 </html>

Role	Property/State	Element	Usage	Role	Attribute
tablist	+ `tablist` +		+ `div` +	Indicates that the element serves as a container for a set of tabs.
	+ `aria-label=Entertainment` +	+ `div` +	Provides a label that describes the purpose of the set of tabs.
+ `tab` +		+ `button` +	+ + Indicates the element serves as a tab control. + + When focused, is automatically activated, causing its associated `tabpanel` + to be displayed. + + + Provides a title for its associated `tabpanel`. + + +
	+ `aria-selected=true` +	+ `button` +	- Serves as the container for the set of tabs. + Indicates the tab control is activated and its associated panel is displayed. + Set when a tab receives focus.
tab		+ `aria-selected=false` +	+ `button` +	+ + + Indicates the tab control is not active and its associated panel is NOT + displayed. + + Set for all tab elements in the tab set except the focused tab. + +
	+ `tabindex=-1` +	+ `button` +	- Contains title for tab panel, activates tab panel when activated. + Removes the element from the page `Tab` sequence. + Set when a tab is not selected so that only the selected tab is in the page `Tab` sequence. + Since an HTML `button` element is used for the tab, it is not necessary to set `tabindex=0` on the selected (active) tab element. + This approach to managing focus is described in the section on roving tabindex.
tabpanel		+ `aria-controls=IDREF` +	+ `button` +	+ Refers to the `tabpanel` element associated with the tab. +
+ `tabpanel` +		+ `div` +	+ + Indicates the element serves as a container for tab panel content. + + Is hidden unless its associated `tab` control is activated. + + +
	+ `aria-labelledby=IDREF` +	+ `div` +	- Contains the tab’s associated content. + + Refers to the `tab` element that controls the panel. + + Provides an accessible name for the tab panel.
	aria-controls	element with `role` of `tab`	+ `tabindex=0` +	+ `div` +	- + Puts the tabpanel in the page `Tab` sequence. + Facilitates movement to panel content for assistive technology users. + Especially helpful if there are panels that do not contain a focusable element.