Add tabbed carousel example for issue 955

aria-practices.html

@@ -508,10 +508,11 @@ <h3>Carousel (Slide Show or Image Rotator)</h3>
       </ul>
 
       <section class="notoc">
-        <h4>Example</h4>
-        <p>
-          <a href="examples/carousel/carousel-1.html">Auto-Rotating Image Carousel Example:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load.
-        </p>
+        <h4>Examples</h4>
+        <ul>
+          <li><a href="examples/carousel/carousel-1.html">Auto-Rotating Image Carousel Example:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load.</li>
+          <li><a href="examples/carousel/carousel-2-tablist.html">Example of Rotating Image Carousel Using  a Tab List:</a> An image carousel that demonstrates using tabs to represent the controls that enable users to choose which slide to display.</li>
+        </ul>
       </section>
 
       <section class="notoc">

examples/carousel/carousel-1.html

@@ -43,8 +43,12 @@ <h1>Auto-Rotating Image Carousel Example</h1>
         <a href="../../#carousel">carousel design pattern</a>
         demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
         For instance, rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content.
-        The accessibility features section that follows the example describes these features in detail.
+        The accessibility features section that follows the example describes these aspects of the design in detail.
       </p>
+      <p>Similar examples include:</p>
+      <ul>
+        <li><a href="carousel-2-tablist.html">Example of Rotating Image Carousel Using  a Tab List:</a> An image carousel that demonstrates using tabs to represent the controls that enable users to choose which slide to display.</li>
+      </ul>
 
       <section>
         <h2>Example View Options</h2>
@@ -280,8 +284,8 @@ <h3>Controlling Automatic Slide Rotation</h3>
         </ul>
         <h3>Color Contrast of Text and Rotation Controls</h3>
         <p>
-          In the view of this carousel where the controls and captions are displayed on top of the image, the background images can cause color contrast for the controls and text to become insufficient.
-          This view includes the following features to meet WCAG 2.1 color contrast requirements:
+          In the view of this carousel where the controls and captions are displayed on top of the image, background images could cause color contrast for the controls and text to become insufficient.
+          However, this view includes the following features to prevent this potential problem and ensure it meets WCAG 2.1 color contrast requirements:
         </p>
         <ul>
           <li>