#21 differentiating adjacent synched carousels with regionLabel.

Accessible360 · Jan 11, 2021 · 3261f59 · 3261f59
1 parent d59b0d5
commit 3261f59
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -605,7 +605,8 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav',
-  instructionsText: 'Changing this current slide of this carousel will change the current slide of the carousel that follows.'
+  instructionsText: 'Changing this current slide of this carousel will change the current slide of the thumbnail carousel that follows.',
+  regionLabel: 'main image carousel'
 });
 
 $('.slider-nav').slick({
@@ -614,8 +615,8 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
   asNavFor: '.slider-for',
   dots: true,
   centerMode: true,
-  focusOnSelect: true,
-  instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding carousel.'
+  instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding main image carousel.',
+  regionLabel: 'thumbnail carousel'
 });</code></pre>
 
         <div class="accessibility-tip">
@@ -625,7 +626,18 @@ <h3 id="slider-syncing" tabindex="-1">Slider Syncing</h3>
 
           <div class="content">
             <h4 class="heading">TIP: always explain how sliders are synced!</h4>
-            <p>Use the new <code>instructionsText</code> setting </code> to provide clear, simple instructions for screen reader users to explain what happens when they interact with these sliders. These instructions will be added as screen-reader-only text at the beginning of the slider.</p>
+            <p>Use the new <code>instructionsText</code> setting to provide clear, simple instructions for screen reader users to explain what happens when they interact with these sliders. These instructions will be added as screen-reader-only text at the beginning of the slider.</p>
+          </div>
+        </div>
+
+        <div class="accessibility-tip">
+          <div class="icon">
+            <span class="fa fa-universal-access" aria-hidden="true"></span>
+          </div>
+
+          <div class="content">
+            <h4 class="heading">TIP: differentiate adjacent carousels</h4>
+            <p>Use the new <code>regionLabel</code> setting to change to <code>aria-label</code> on the wrapper regions so that they are easier for screen reader users to tell apart. Even better, use that same text in the instructions you provide so these users know what to listen for as they explore the page!</p>
           </div>
         </div>
 
@@ -999,7 +1011,8 @@ <h2 id="go-get-it" tabindex="-1">Go Get It</h2>
       arrows: false,
       fade: true,
       asNavFor: '.slider-nav',
-      instructionsText: 'Changing this current slide of this carousel will change the current slide of the carousel that follows.'
+      instructionsText: 'Changing this current slide of this carousel will change the current slide of the thumbnail carousel that follows.',
+      regionLabel: 'main image carousel'
     });
 
     // b. Control slider
@@ -1010,9 +1023,9 @@ <h2 id="go-get-it" tabindex="-1">Go Get It</h2>
       asNavFor: '.slider-for',
       dots: true,
       centerMode: true,
-      focusOnSelect: true,
       slide: 'div',
-      instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding carousel.'
+      instructionsText: 'Changing the current slide of this carousel will change the current slide of the preceding main image carousel.',
+      regionLabel: 'thumbnail carousel'
     });
 
     // Right to Left