From 5446c67bba1c2c131aef0f1d71ad9ff74285bf63 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 13 Feb 2024 00:31:03 -0600
Subject: [PATCH] Infrastructure: update skipto.js to version 5.2.1 (pull
 #2807)

Updates skipto.js to use version 5.2.1 without APG specific modifications.

In lieu of modifying the script, the script import now specifies parameters for the desired behaviors.

This required changing the script import on every page to include the following data attribute:
```
  <script data-skipto="colortheme: aria; displayoption: popup" src="../../shared/js/skipto.js"></script>
```

This is related to [issue 259](https://github.com/w3c/wai-aria-practices/issues/259) in wai-aria-practices repository.

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>
---
 content/about/about.html                      |    2 +-
 .../acknowledgements/acknowledgements.html    |    2 +-
 content/about/aria-basics/aria-basics.html    |    2 +-
 .../about/change-history/change-history.html  |    2 +-
 .../coverage-and-quality-report.html          |  597 ++++----
 .../coverage-and-quality/prop-coverage.csv    |    2 +-
 .../coverage-and-quality/role-coverage.csv    |    2 +-
 content/about/introduction/introduction.html  |    2 +-
 .../related-specifications.html               |    2 +-
 content/apg-home.html                         |    3 +
 content/index/index.html                      |    1 +
 .../patterns/accordion/accordion-pattern.html |    2 +-
 .../accordion/examples/accordion.html         |    2 +-
 content/patterns/alert/alert-pattern.html     |    2 +-
 content/patterns/alert/examples/alert.html    |    2 +-
 .../alertdialog/alertdialog-pattern.html      |    2 +-
 .../alertdialog/examples/alertdialog.html     |    2 +-
 .../breadcrumb/breadcrumb-pattern.html        |    2 +-
 .../breadcrumb/examples/breadcrumb.html       |    2 +-
 content/patterns/button/button-pattern.html   |    2 +-
 content/patterns/button/examples/button.html  |    2 +-
 .../patterns/button/examples/button_idl.html  |    2 +-
 .../patterns/carousel/carousel-pattern.html   |    2 +-
 .../examples/carousel-1-prev-next.html        |    2 +-
 .../carousel/examples/carousel-2-tablist.html |    2 +-
 .../patterns/checkbox/checkbox-pattern.html   |    2 +-
 .../checkbox/examples/checkbox-mixed.html     |    2 +-
 .../patterns/checkbox/examples/checkbox.html  |    2 +-
 .../patterns/combobox/combobox-pattern.html   |    2 +-
 .../examples/combobox-autocomplete-both.html  |    2 +-
 .../examples/combobox-autocomplete-list.html  |    2 +-
 .../examples/combobox-autocomplete-none.html  |    2 +-
 .../examples/combobox-datepicker.html         |    2 +-
 .../examples/combobox-select-only.html        |    2 +-
 .../combobox/examples/grid-combo.html         |    2 +-
 .../dialog-modal/dialog-modal-pattern.html    |    2 +-
 .../examples/datepicker-dialog.html           |    2 +-
 .../dialog-modal/examples/dialog.html         |    2 +-
 .../disclosure/disclosure-pattern.html        |    2 +-
 .../disclosure/examples/disclosure-faq.html   |    2 +-
 .../disclosure-image-description.html         |    2 +-
 .../disclosure-navigation-hybrid.html         |    2 +-
 .../examples/disclosure-navigation.html       |    2 +-
 .../patterns/feed/examples/feed-display.html  |    2 +-
 content/patterns/feed/examples/feed.html      |    2 +-
 content/patterns/feed/feed-pattern.html       |    2 +-
 .../grid/examples/advanced-data-grid.html     |    2 +-
 .../patterns/grid/examples/data-grids.html    |    2 +-
 .../patterns/grid/examples/layout-grids.html  |    2 +-
 content/patterns/grid/grid-pattern.html       |    2 +-
 .../patterns/landmarks/landmarks-pattern.html |    2 +-
 content/patterns/link/examples/link.html      |    2 +-
 content/patterns/link/link-pattern.html       |    2 +-
 .../listbox/examples/listbox-collapsible.html |    2 +-
 .../listbox/examples/listbox-grouped.html     |    2 +-
 .../examples/listbox-rearrangeable.html       |    2 +-
 .../listbox/examples/listbox-scrollable.html  |    2 +-
 content/patterns/listbox/listbox-pattern.html |    2 +-
 ...menu-button-actions-active-descendant.html |    2 +-
 .../examples/menu-button-actions.html         |    2 +-
 .../examples/menu-button-links.html           |    2 +-
 .../menu-button/menu-button-pattern.html      |    2 +-
 .../menubar/examples/menubar-editor.html      |    2 +-
 .../menubar/examples/menubar-navigation.html  |    2 +-
 .../menubar/menu-and-menubar-pattern.html     |    2 +-
 content/patterns/meter/examples/meter.html    |    2 +-
 content/patterns/meter/meter-pattern.html     |    2 +-
 content/patterns/patterns.html                |    2 +-
 .../examples/radio-activedescendant.html      |    2 +-
 .../patterns/radio/examples/radio-rating.html |    2 +-
 content/patterns/radio/examples/radio.html    |    2 +-
 .../patterns/radio/radio-group-pattern.html   |    2 +-
 .../examples/slider-multithumb.html           |    2 +-
 .../slider-multithumb-pattern.html            |    2 +-
 .../slider/examples/slider-color-viewer.html  |    2 +-
 .../slider/examples/slider-rating.html        |    2 +-
 .../patterns/slider/examples/slider-seek.html |    2 +-
 .../slider/examples/slider-temperature.html   |    2 +-
 content/patterns/slider/slider-pattern.html   |    2 +-
 .../examples/datepicker-spinbuttons.html      |    2 +-
 .../spinbutton/spinbutton-pattern.html        |    2 +-
 .../switch/examples/switch-button.html        |    2 +-
 .../switch/examples/switch-checkbox.html      |    2 +-
 content/patterns/switch/examples/switch.html  |    2 +-
 content/patterns/switch/switch-pattern.html   |    2 +-
 .../table/examples/sortable-table.html        |    2 +-
 content/patterns/table/examples/table.html    |    2 +-
 content/patterns/table/table-pattern.html     |    2 +-
 .../tabs/examples/tabs-automatic.html         |    2 +-
 .../patterns/tabs/examples/tabs-manual.html   |    2 +-
 content/patterns/tabs/tabs-pattern.html       |    2 +-
 content/patterns/toolbar/examples/help.html   |    2 +-
 .../patterns/toolbar/examples/toolbar.html    |    2 +-
 content/patterns/toolbar/toolbar-pattern.html |    2 +-
 content/patterns/tooltip/tooltip-pattern.html |    2 +-
 .../treegrid/examples/treegrid-1.html         |    2 +-
 .../patterns/treegrid/treegrid-pattern.html   |    2 +-
 .../treeview/examples/treeview-1a.html        |    2 +-
 .../treeview/examples/treeview-1b.html        |    2 +-
 .../examples/treeview-navigation.html         |    2 +-
 .../patterns/treeview/treeview-pattern.html   |    2 +-
 .../windowsplitter-pattern.html               |    2 +-
 .../grid-and-table-properties-practice.html   |    2 +-
 .../hiding-semantics-practice.html            |    2 +-
 .../keyboard-interface-practice.html          |    2 +-
 .../landmark-regions-practice.html            |    2 +-
 .../names-and-descriptions-practice.html      |    2 +-
 content/practices/practices.html              |    2 +-
 .../range-related-properties-practice.html    |    2 +-
 .../read-me-first/read-me-first-practice.html |    2 +-
 .../structural-roles-practice.html            |    2 +-
 content/shared/js/skipto.js                   | 1235 +++++++++--------
 scripts/coverage-report.template              |    1 +
 scripts/reference-tables.template             |    1 +
 114 files changed, 1081 insertions(+), 973 deletions(-)

diff --git a/content/about/about.html b/content/about/about.html
index 5b4f798337..6433880dd1 100644
--- a/content/about/about.html
+++ b/content/about/about.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
-    <script src="../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/about/acknowledgements/acknowledgements.html b/content/about/acknowledgements/acknowledgements.html
index 30cc2a406a..5b4b689e46 100644
--- a/content/about/acknowledgements/acknowledgements.html
+++ b/content/about/acknowledgements/acknowledgements.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/about/aria-basics/aria-basics.html b/content/about/aria-basics/aria-basics.html
index ca215a9f80..ddc6a9454f 100644
--- a/content/about/aria-basics/aria-basics.html
+++ b/content/about/aria-basics/aria-basics.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/about/change-history/change-history.html b/content/about/change-history/change-history.html
index 4ef797750d..ede41e2e75 100644
--- a/content/about/change-history/change-history.html
+++ b/content/about/change-history/change-history.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html
index 7c2832352d..4665cbffaa 100644
--- a/content/about/coverage-and-quality/coverage-and-quality-report.html
+++ b/content/about/coverage-and-quality/coverage-and-quality-report.html
@@ -8,6 +8,7 @@
   <script src="../../shared/js/examples.js"></script>
   <script src="../../shared/js/highlight.pack.js"></script>
   <script src="../../shared/js/app.js"></script>
+  <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   <style>
     .sr-only {position: absolute; top: -30em;}
     table.summary th { width: 12em; }
@@ -51,9 +52,9 @@ <h2>About These Reports</h2>
       </p>
       <ul>
         <li><a href="#csv_files">CSV Files of Role, Properties and States Coverage</a></li>
-        <li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count">29</span>)</a></li>
+        <li><a href="#roles_with_no_examples">Roles with no Guidance or Examples (<span class="roles_with_no_examples_count">28</span>)</a></li>
         <li><a href="#roles_with_one_example">Roles with at Least One Guidance or Example (<span class="roles_with_one_example_count">13</span>)</a></li>
-        <li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example  (<span class="roles_with_more_than_one_examples_count">36</span>)</a></li>
+        <li><a href="#roles_with_more_than_one_example">Roles with More than One Guidance or Example  (<span class="roles_with_more_than_one_examples_count">37</span>)</a></li>
         <li><a href="#props_with_no_examples">Properties and States with no Examples (<span class="props_with_no_examples_count">12</span>)</a></li>
         <li><a href="#props_with_one_example">Properties and States with One Examples (<span class="props_with_one_example_count">8</span>)</a></li>
         <li><a href="#props_with_more_than_one_example">Properties and States with More than One Example  (<span class="props_with_more_than_one_examples_count">28</span>)</a></li>
@@ -70,7 +71,7 @@ <h2>CSV Formatted Reports of Role, Property, and State Coverage</h2>
     </section>
 
     <section id="roles_with_no_examples">
-      <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span class="roles_with_no_examples_count">29</span>)</h2>
+      <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span class="roles_with_no_examples_count">28</span>)</h2>
       <ul id="roles_with_no_examples_ul">
             <li><code>application</code></li>
             <li><code>caption</code></li>
@@ -91,7 +92,6 @@ <h2 id="roles_with_no_examples_label">Roles with No Guidance or Examples (<span
             <li><code>log</code></li>
             <li><code>marquee</code></li>
             <li><code>math</code></li>
-            <li><code>note</code></li>
             <li><code>paragraph</code></li>
             <li><code>progressbar</code></li>
             <li><code>rowheader</code></li>
@@ -203,7 +203,7 @@ <h2 id="roles_with_one_example_label">Roles with at Least One Guidance or Exampl
     </section>
 
     <section id="roles_with_more_than_one_example">
-      <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">36</span>)</h2>
+      <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Example (<span class="roles_with_more_than_one_examples_count">37</span>)</h2>
       <div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
       <table aria-labelledby="roles_with_more_than_one_label" class="data attributes">
         <thead>
@@ -480,6 +480,50 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
             </ul>
 </td>
           </tr>
+          <tr>
+            <td><code>note</code></td>
+            <td><ul>
+                <li><a href="../../../content/patterns/button/button-pattern.html#about">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/combobox/combobox-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/dialog-modal/dialog-modal-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/dialog-modal/dialog-modal-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/feed/feed-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/grid/grid-pattern.html#dataGrid">Note</a></li>
+                <li><a href="../../../content/patterns/grid/grid-pattern.html#dataGrid">Note</a></li>
+                <li><a href="../../../content/patterns/grid/grid-pattern.html#layoutGrid">Note</a></li>
+                <li><a href="../../../content/patterns/grid/grid-pattern.html#layoutGrid">Note</a></li>
+                <li><a href="../../../content/patterns/grid/grid-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/link/link-pattern.html#about">note</a></li>
+                <li><a href="../../../content/patterns/listbox/listbox-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/listbox/listbox-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/menubar/menu-and-menubar-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/menubar/menu-and-menubar-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/meter/meter-pattern.html#about">Note</a></li>
+                <li><a href="../../../content/patterns/radio/radio-group-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/radio/radio-group-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/slider/slider-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/spinbutton/spinbutton-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/table/table-pattern.html#about">Note</a></li>
+                <li><a href="../../../content/patterns/table/table-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/tabs/tabs-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/toolbar/toolbar-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/tooltip/tooltip-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/treegrid/treegrid-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/treegrid/treegrid-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/treegrid/treegrid-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/treeview/treeview-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/patterns/treeview/treeview-pattern.html#roles_states_properties">Note</a></li>
+                <li><a href="../../../content/patterns/windowsplitter/windowsplitter-pattern.html#keyboard_interaction">Note</a></li>
+                <li><a href="../../../content/practices/keyboard-interface/keyboard-interface-practice.html#kbd_shortcuts_assigning">Note</a></li>
+            </ul>
+</td>
+            <td></td>
+          </tr>
           <tr>
             <td><code>option</code></td>
             <td></td>
@@ -940,6 +984,9 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
             <td></td>
             <td><ul>
                 <li><a href="../../../content/patterns/button/examples/button_idl.html">Button  (IDL Version)</a></li>
+                <li><a href="../../../content/patterns/listbox/examples/listbox-grouped.html">Listbox  with Grouped Options</a></li>
+                <li><a href="../../../content/patterns/listbox/examples/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
+                <li><a href="../../../content/patterns/listbox/examples/listbox-scrollable.html">Scrollable Listbox</a></li>
                 <li><a href="../../../content/patterns/menubar/examples/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/slider-multithumb/examples/slider-multithumb.html">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/slider/examples/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -1232,7 +1279,7 @@ <h3 id="example_summary">Coding Summary</h3>
           </tr>
           <tr>
             <th scope="row">Uses SVG</th>
-            <td id="example_summary_svg">33</td>
+            <td id="example_summary_svg">34</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>forced-color-adjust</code> on SVG</th>
@@ -1240,23 +1287,23 @@ <h3 id="example_summary">Coding Summary</h3>
           </tr>
           <tr>
             <th scope="row">Uses <code>event.KeyCode</code></th>
-            <td id="example_summary_keycode">20</td>
+            <td id="example_summary_keycode">16</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>event.which</code></th>
-            <td id="example_summary_which">12</td>
+            <td id="example_summary_which">60</td>
           </tr>
           <tr>
             <th scope="row">Use Class</th>
-            <td id="example_summary_class">31</td>
+            <td id="example_summary_class">36</td>
           </tr>
           <tr>
             <th scope="row">Use Prototype</th>
-            <td id="example_summary_prototype">23</td>
+            <td id="example_summary_prototype">60</td>
           </tr>
           <tr>
             <th scope="row">Mouse Events</th>
-            <td id="example_summary_mouse">16</td>
+            <td id="example_summary_mouse">15</td>
           </tr>
           <tr>
             <th scope="row">Pointer Events</th>
@@ -1285,29 +1332,29 @@ <h3 id="example_coding_practices">Coding Practices</h3>
         <tbody id="example_coding_practices_tbody">
           <tr>
             <td><a href="../../../content/patterns/accordion/examples/accordion.html">Accordion</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>9</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-label,aria-required,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-required,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/alert/examples/alert.html">Alert</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>7</td>
+            <td>8</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription,aria-live,aria-atomic</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-live,aria-atomic</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/alertdialog/examples/alertdialog.html">Alert Dialog</a></td>
@@ -1316,167 +1363,167 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>Yes</td>
             <td></td>
             <td>ex_alertdialog</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>11</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/breadcrumb/examples/breadcrumb.html">Breadcrumb</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>0</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,navigation,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,navigation,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/button/examples/button_idl.html">Button  (IDL Version)</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/button/examples/button.html">Button</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/carousel/examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel  with Buttons for Slide Control</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-labelledby</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>4</td>
-            <td>9</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-labelledby</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/checkbox/examples/checkbox-mixed.html">Checkbox  (Mixed-State)</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>8</td>
+            <td>10</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/checkbox/examples/checkbox.html">Checkbox  (Two State)</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/combobox-autocomplete-both.html">Editable Combobox With Both List and Inline Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/combobox-autocomplete-list.html">Editable Combobox With List Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/combobox-autocomplete-none.html">Editable Combobox without Autocomplete</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-hidden,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/combobox-datepicker.html">Date Picker Combobox</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>3</td>
-            <td>13</td>
+            <td>14</td>
             <td>10</td>
-            <td>gridcell,heading,menu,menuitem,aria-busy,aria-hidden,aria-roledescription</td>
+            <td>gridcell,heading,aria-busy,aria-errormessage,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/combobox-select-only.html">Select-Only Combobox</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
             <td>3</td>
-            <td>9</td>
+            <td>3</td>
+            <td>12</td>
             <td>5</td>
-            <td>heading,menu,menuitem,option,aria-busy,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,option,aria-busy,aria-describedby,aria-errormessage,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/combobox/examples/grid-combo.html">Editable Combobox with Grid Popup</a></td>
@@ -1485,24 +1532,24 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>4</td>
-            <td>10</td>
+            <td>13</td>
             <td>7</td>
-            <td>heading,menu,menuitem,row,gridcell,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,row,gridcell,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a></td>
-            <td>prototype</td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
             <td>Yes</td>
             <td>example</td>
-            <td>6</td>
+            <td>4</td>
             <td>2</td>
             <td>11</td>
             <td>6</td>
-            <td>gridcell,heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>gridcell,heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/dialog-modal/examples/dialog.html">Modal Dialog</a></td>
@@ -1511,76 +1558,63 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/disclosure/examples/disclosure-faq.html">Disclosure (Show/Hide) for Answers to Frequently Asked Questions</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/disclosure/examples/disclosure-image-description.html">Disclosure (Show/Hide) for Image Description</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/disclosure/examples/disclosure-navigation-hybrid.html">Disclosure Navigation Menu with Top-Level Links</a></td>
             <td>class, prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>7</td>
+            <td>5</td>
             <td>0</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>banner,contentinfo,heading,menu,menuitem,navigation,region,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>banner,contentinfo,heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/disclosure/examples/disclosure-navigation.html">Disclosure Navigation Menu</a></td>
             <td>class, prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
-            <td>0</td>
-            <td>8</td>
             <td>3</td>
-            <td>heading,menu,menuitem,navigation,region,aria-busy,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
-          </tr>
-          <tr>
-            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td>ex1</td>
+            <td>0</td>
+            <td>10</td>
             <td>3</td>
-            <td>2</td>
-            <td>7</td>
-            <td>5</td>
-            <td>heading,menu,menuitem,feed,article,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription,aria-describedby,aria-posinset,aria-setsize</td>
+            <td>heading,navigation,region,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/feed/examples/feed-display.html">Feed Display</a></td>
@@ -1595,6 +1629,19 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>0</td>
             <td>aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/feed/examples/feed.html">Feed</a></td>
+            <td>prototype</td>
+            <td></td>
+            <td>Yes</td>
+            <td></td>
+            <td>ex1</td>
+            <td>1</td>
+            <td>2</td>
+            <td>8</td>
+            <td>5</td>
+            <td>heading,feed,article,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription,aria-posinset,aria-setsize</td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/grid/examples/advanced-data-grid.html">Advanced Data Grid</a></td>
             <td>prototype</td>
@@ -1602,11 +1649,11 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>10</td>
+            <td>13</td>
             <td>0</td>
-            <td>heading,menu,menuitem,aria-busy,aria-colindex,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription,aria-rowindex,aria-sort</td>
+            <td>heading,aria-busy,aria-colindex,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-labelledby,aria-roledescription,aria-rowindex,aria-sort</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/grid/examples/data-grids.html">Data Grid</a></td>
@@ -1617,9 +1664,9 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>ex1</td>
             <td>5</td>
             <td>1</td>
-            <td>12</td>
+            <td>15</td>
             <td>6</td>
-            <td>button,heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>button,heading,menu,menuitem,aria-busy,aria-controls,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/grid/examples/layout-grids.html">Layout Grid</a></td>
@@ -1628,440 +1675,440 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>6</td>
             <td>3</td>
-            <td>13</td>
+            <td>15</td>
             <td>3</td>
-            <td>button,heading,menu,menuitem,region,aria-busy,aria-colindex,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-live,aria-relevant,aria-roledescription,aria-sort</td>
+            <td>button,heading,region,aria-busy,aria-colindex,aria-describedby,aria-errormessage,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-live,aria-relevant,aria-roledescription,aria-sort</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/link/examples/link.html">Link</a></td>
-            <td></td>
+            <td>prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td></td>
             <td>not found</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
-            <td>7</td>
+            <td>8</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/listbox/examples/listbox-collapsible.html">(Deprecated) Collapsible Dropdown Listbox</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>12</td>
+            <td>14</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-disabled,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-hidden,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/listbox/examples/listbox-grouped.html">Listbox  with Grouped Options</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>7</td>
-            <td>3</td>
-            <td>12</td>
+            <td>5</td>
             <td>3</td>
-            <td>heading,menu,menuitem,presentation,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>13</td>
+            <td>4</td>
+            <td>heading,presentation,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/listbox/examples/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
-            <td>2</td>
-            <td>13</td>
             <td>4</td>
-            <td>heading,menu,menuitem,toolbar,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-live,aria-roledescription</td>
+            <td>2</td>
+            <td>14</td>
+            <td>5</td>
+            <td>heading,toolbar,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-live,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/listbox/examples/listbox-scrollable.html">Scrollable Listbox</a></td>
-            <td>prototype</td>
-            <td>Yes</td>
+            <td>class, prototype</td>
+            <td></td>
             <td>Yes</td>
             <td></td>
             <td>ex</td>
-            <td>5</td>
-            <td>2</td>
-            <td>12</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-disabled,aria-expanded,aria-haspopup,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
+            <td>2</td>
+            <td>13</td>
+            <td>4</td>
+            <td>heading,aria-busy,aria-describedby,aria-disabled,aria-errormessage,aria-expanded,aria-keyshortcuts,aria-label,aria-multiselectable,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/menu-button/examples/menu-button-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>3</td>
             <td>2</td>
-            <td>7</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/menu-button/examples/menu-button-links.html">Navigation Menu Button</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>4</td>
             <td>3</td>
-            <td>7</td>
+            <td>10</td>
             <td>4</td>
-            <td>heading,aria-busy,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/menubar/examples/menubar-editor.html">Editor Menubar</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>9</td>
             <td>7</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,none,aria-busy,aria-controls,aria-labelledby,aria-orientation,aria-roledescription</td>
+            <td>heading,none,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-orientation,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/menubar/examples/menubar-navigation.html">Navigation Menubar</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
             <td>10</td>
             <td>8</td>
-            <td>9</td>
+            <td>11</td>
             <td>5</td>
-            <td>heading,separator,aria-busy,aria-controls,aria-orientation,aria-roledescription</td>
+            <td>heading,separator,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-orientation,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/meter/examples/meter.html">Meter</a></td>
             <td>prototype</td>
             <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>example</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>11</td>
             <td>4</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-hidden,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/radio/examples/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>9</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/radio/examples/radio-rating.html">Rating Radio Group</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/radio/examples/radio.html">Radio Group  Using Roving tabindex</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
-            <td>8</td>
+            <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/slider-multithumb/examples/slider-multithumb.html">Horizontal Multi-Thumb Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/slider/examples/slider-color-viewer.html">Color Viewer Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>11</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/slider/examples/slider-rating.html">Rating Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/slider/examples/slider-seek.html">Media Seek Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/slider/examples/slider-temperature.html">Vertical Temperature Slider</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>13</td>
             <td>7</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/spinbutton/examples/datepicker-spinbuttons.html">Date Picker Spin Button</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>example</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>12</td>
             <td>7</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/switch/examples/switch-button.html">Switch  Using HTML Button</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>5</td>
+            <td>3</td>
             <td>2</td>
             <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/switch/examples/switch-checkbox.html">Switch  Using HTML Checkbox Input</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>8</td>
             <td>1</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/switch/examples/switch.html">Switch</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>4</td>
+            <td>2</td>
             <td>1</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/table/examples/sortable-table.html">Sortable Table</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
             <td>9</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/table/examples/table.html">Table</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>6</td>
             <td>5</td>
             <td>8</td>
             <td>2</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-errormessage,aria-expanded,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a></td>
-            <td>class</td>
-            <td></td>
+            <td>class, prototype</td>
             <td></td>
             <td>Yes</td>
+            <td>Yes</td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>10</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-expanded,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/toolbar/examples/help.html">Toolbar</a></td>
+            <td>prototype</td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>not found</td>
-            <td>3</td>
+            <td>1</td>
             <td>0</td>
-            <td>7</td>
+            <td>8</td>
             <td>0</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-expanded,aria-haspopup,aria-label,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-expanded,aria-hidden,aria-label,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/toolbar/examples/toolbar.html">Toolbar</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>8</td>
+            <td>7</td>
             <td>6</td>
-            <td>15</td>
+            <td>17</td>
             <td>12</td>
-            <td>heading,menuitem,aria-busy,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/treegrid/examples/treegrid-1.html">Treegrid Email Inbox</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>12</td>
+            <td>13</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-activedescendant,aria-busy,aria-controls,aria-current,aria-haspopup,aria-labelledby,aria-roledescription</td>
+            <td>heading,aria-activedescendant,aria-busy,aria-current,aria-describedby,aria-errormessage,aria-hidden,aria-labelledby,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/treeview/examples/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>8</td>
+            <td>9</td>
             <td>3</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/treeview/examples/treeview-1b.html">File Directory Treeview  Using Declared Properties</a></td>
             <td>prototype</td>
             <td>Yes</td>
-            <td></td>
+            <td>Yes</td>
             <td></td>
             <td>ex1</td>
-            <td>6</td>
+            <td>4</td>
             <td>3</td>
-            <td>11</td>
+            <td>12</td>
             <td>6</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-label,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription</td>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/treeview/examples/treeview-navigation.html">Navigation Treeview</a></td>
-            <td>class</td>
+            <td>class, prototype</td>
+            <td>Yes</td>
             <td>Yes</td>
-            <td></td>
             <td>Yes</td>
             <td>ex1</td>
-            <td>11</td>
-            <td>8</td>
             <td>9</td>
+            <td>8</td>
+            <td>10</td>
             <td>5</td>
-            <td>heading,menu,menuitem,aria-busy,aria-controls,aria-haspopup,aria-roledescription</td>
+            <td>heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-roledescription</td>
           </tr></tbody>
       </table>
 
@@ -2263,8 +2310,8 @@ <h3 id="example_graphics_techniques">Graphics Techniques</h3>
           <tr>
             <td><a href="../../../content/patterns/feed/examples/feed-display.html">Feed Display</a></td>
             <td></td>
-            <td></td>
-            <td></td>
+            <td>Yes</td>
+            <td>Yes</td>
             <td></td>
             <td></td>
             <td></td>
@@ -2664,7 +2711,7 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
           </tr>
           <tr>
             <td><a href="../../../content/patterns/dialog-modal/examples/datepicker-dialog.html">Date Picker Dialog</a></td>
-            <td>Yes</td>
+            <td></td>
             <td>Yes</td>
           </tr>
           <tr>
@@ -2884,4 +2931,4 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
   </main>
 
 
-</body></html>
+</body></html>
\ No newline at end of file
diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv
index 973e524f43..ed19b10250 100644
--- a/content/about/coverage-and-quality/prop-coverage.csv
+++ b/content/about/coverage-and-quality/prop-coverage.csv
@@ -18,7 +18,7 @@
 "aria-flowto","0","0"
 "aria-grabbed","0","0"
 "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button  Using aria-activedescendant","Example: Actions Menu Button  Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar"
-"aria-hidden","0","13","Example: Button  (IDL Version)","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
+"aria-hidden","0","16","Example: Button  (IDL Version)","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch  Using HTML Button","Example: Switch  Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar"
 "aria-invalid","0","0"
 "aria-keyshortcuts","0","0"
 "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel  with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview"
diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv
index 9a3a1ea183..104fad9ec2 100644
--- a/content/about/coverage-and-quality/role-coverage.csv
+++ b/content/about/coverage-and-quality/role-coverage.csv
@@ -46,7 +46,7 @@
 "meter","2","1","Guidance: Meter Pattern","Guidance: Range properties with meter","Example: Meter"
 "navigation","5","3","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation","Guidance: Navigation","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark"
 "none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview"
-"note","0","0"
+"note","37","0","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note"
 "option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox  with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox"
 "paragraph","0","0"
 "presentation","5","0","Guidance: Hiding Semantics with the presentation Role","Guidance: Common Uses of Role presentation","Guidance: Effects of Role presentation","Guidance: Conditions That Cause Role presentation to be Ignored","Guidance: Example Demonstrating Effects of the presentation Role"
diff --git a/content/about/introduction/introduction.html b/content/about/introduction/introduction.html
index 675e2087c6..9b614e15a9 100644
--- a/content/about/introduction/introduction.html
+++ b/content/about/introduction/introduction.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/about/related-specifications/related-specifications.html b/content/about/related-specifications/related-specifications.html
index d70115f78d..158ea7fce7 100644
--- a/content/about/related-specifications/related-specifications.html
+++ b/content/about/related-specifications/related-specifications.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/apg-home.html b/content/apg-home.html
index 4dc3c07c83..fd08467c1a 100644
--- a/content/apg-home.html
+++ b/content/apg-home.html
@@ -12,6 +12,9 @@
         max-width: 300px;
       }
     </style>
+
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="shared/js/skipto.js"></script>
+
   </head>
   <body>
     <div id="top-card">
diff --git a/content/index/index.html b/content/index/index.html
index 08a437bcbc..b004007e85 100644
--- a/content/index/index.html
+++ b/content/index/index.html
@@ -8,6 +8,7 @@
   <script src="../shared/js/examples.js"></script>
   <script src="../shared/js/highlight.pack.js"></script>
   <script src="../shared/js/app.js"></script>
+  <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
 </head>
 <body>
   <main>
diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
index a141142e11..c39f4e1745 100644
--- a/content/patterns/accordion/accordion-pattern.html
+++ b/content/patterns/accordion/accordion-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
index 1596083509..565ae39baa 100644
--- a/content/patterns/accordion/examples/accordion.html
+++ b/content/patterns/accordion/examples/accordion.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/accordion.css">
diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
index 81318f72c1..125e2e017d 100644
--- a/content/patterns/alert/alert-pattern.html
+++ b/content/patterns/alert/alert-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
index 2f4d78b9cb..78687d9239 100644
--- a/content/patterns/alert/examples/alert.html
+++ b/content/patterns/alert/examples/alert.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/alert.css" rel="stylesheet">
diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
index 0db8f9fb31..0cfa66ee6e 100644
--- a/content/patterns/alertdialog/alertdialog-pattern.html
+++ b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
index ea35560665..ad566e3385 100644
--- a/content/patterns/alertdialog/examples/alertdialog.html
+++ b/content/patterns/alertdialog/examples/alertdialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/alertdialog.css" rel="stylesheet">
diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
index 61967ffd9a..3cb30aa572 100644
--- a/content/patterns/breadcrumb/breadcrumb-pattern.html
+++ b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
index df73832aee..1851510d9d 100644
--- a/content/patterns/breadcrumb/examples/breadcrumb.html
+++ b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/breadcrumb.css" rel="stylesheet">
diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html
index fdc991caca..65fabaf965 100644
--- a/content/patterns/button/button-pattern.html
+++ b/content/patterns/button/button-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
index d3029aa99d..c7c939ef61 100644
--- a/content/patterns/button/examples/button.html
+++ b/content/patterns/button/examples/button.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/button.css">
diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
index f30e8ca801..3fdb4da72f 100644
--- a/content/patterns/button/examples/button_idl.html
+++ b/content/patterns/button/examples/button_idl.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/button.css">
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index 996c8e7257..1388a086d4 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index 8cfd8c53b8..150fb1c9e5 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/carousel-prev-next.css">
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index d3a734e9eb..c94d95c335 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/carousel-tablist.css">
diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
index e651646c46..f8477d0fb7 100644
--- a/content/patterns/checkbox/checkbox-pattern.html
+++ b/content/patterns/checkbox/checkbox-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html
index bab132c42d..42e1deed10 100644
--- a/content/patterns/checkbox/examples/checkbox-mixed.html
+++ b/content/patterns/checkbox/examples/checkbox-mixed.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/checkbox-mixed.css" rel="stylesheet">
diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
index b473db021e..1bdc4aba71 100644
--- a/content/patterns/checkbox/examples/checkbox.html
+++ b/content/patterns/checkbox/examples/checkbox.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/checkbox.css" rel="stylesheet">
diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html
index 643e3320dc..a243b50429 100644
--- a/content/patterns/combobox/combobox-pattern.html
+++ b/content/patterns/combobox/combobox-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html
index c4c1e8ce7f..01130f3a93 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-both.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/combobox-autocomplete.css">
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
index c6ed9033b5..63a7a80772 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-list.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/combobox-autocomplete.css" rel="stylesheet">
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
index a4a2df7350..e57fc1d249 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-none.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/combobox-autocomplete.css" rel="stylesheet">
diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index f36df85ea9..cb8ecaeef7 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
index 4768c75a9e..cc32f80ffa 100644
--- a/content/patterns/combobox/examples/combobox-select-only.html
+++ b/content/patterns/combobox/examples/combobox-select-only.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/select-only.css" rel="stylesheet">
diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
index 87a2b587f3..888136b506 100644
--- a/content/patterns/combobox/examples/grid-combo.html
+++ b/content/patterns/combobox/examples/grid-combo.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/grid-combo.css" rel="stylesheet">
diff --git a/content/patterns/dialog-modal/dialog-modal-pattern.html b/content/patterns/dialog-modal/dialog-modal-pattern.html
index 68d8829ed6..b600de8f68 100644
--- a/content/patterns/dialog-modal/dialog-modal-pattern.html
+++ b/content/patterns/dialog-modal/dialog-modal-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
index 486139bdad..debcd78cc1 100644
--- a/content/patterns/dialog-modal/examples/datepicker-dialog.html
+++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
index 7f9c38ba6d..d53a65d079 100644
--- a/content/patterns/dialog-modal/examples/dialog.html
+++ b/content/patterns/dialog-modal/examples/dialog.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/dialog.css" rel="stylesheet">
diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index 5b20b6182d..c6ccdefbb2 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index 138491d7c8..d5fd41d88f 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/disclosure-faq.css" rel="stylesheet">
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index 76f7c835a5..86c312f1e2 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/disclosure-image-description.css" rel="stylesheet">
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 31390dbc87..29d8d4331a 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/disclosure-navigation.css" rel="stylesheet">
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index 75d6c4405e..822540e47f 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/disclosure-navigation.css" rel="stylesheet">
diff --git a/content/patterns/feed/examples/feed-display.html b/content/patterns/feed/examples/feed-display.html
index 00c486be6b..d49daf25b4 100644
--- a/content/patterns/feed/examples/feed-display.html
+++ b/content/patterns/feed/examples/feed-display.html
@@ -12,7 +12,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <!-- <script src="../../../shared/js/skipto.js"></script> -->
+    <!-- <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script> -->
 
     <!-- JS and CSS for this example -->
     <link href="css/feedDisplay.css" rel="stylesheet">
diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html
index a3d8a68c72..5eb04dcfc3 100644
--- a/content/patterns/feed/examples/feed.html
+++ b/content/patterns/feed/examples/feed.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
   </head>
   <body>
     <nav aria-label="Related Links" class="feedback">
diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html
index eb2aec2ebc..5e01061210 100644
--- a/content/patterns/feed/feed-pattern.html
+++ b/content/patterns/feed/feed-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/grid/examples/advanced-data-grid.html b/content/patterns/grid/examples/advanced-data-grid.html
index 4a5c26aabe..204310c04c 100644
--- a/content/patterns/grid/examples/advanced-data-grid.html
+++ b/content/patterns/grid/examples/advanced-data-grid.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <!-- Additional scripts will need to be added to add the advanced functions required by issue #155. -->
diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html
index e7605b3b70..cc4710a342 100644
--- a/content/patterns/grid/examples/data-grids.html
+++ b/content/patterns/grid/examples/data-grids.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!--  JS and CSS for this example. -->
     <link href="css/menuButton.css" rel="stylesheet">
diff --git a/content/patterns/grid/examples/layout-grids.html b/content/patterns/grid/examples/layout-grids.html
index 2f8d4c8007..5644821366 100644
--- a/content/patterns/grid/examples/layout-grids.html
+++ b/content/patterns/grid/examples/layout-grids.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/layoutGrids.css" rel="stylesheet">
diff --git a/content/patterns/grid/grid-pattern.html b/content/patterns/grid/grid-pattern.html
index e03f6b969e..7becf71747 100644
--- a/content/patterns/grid/grid-pattern.html
+++ b/content/patterns/grid/grid-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
index a8d16e7891..c020b5ca08 100644
--- a/content/patterns/landmarks/landmarks-pattern.html
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
index b482ab957d..f482e060ae 100644
--- a/content/patterns/link/examples/link.html
+++ b/content/patterns/link/examples/link.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/link.css" rel="stylesheet">
diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html
index 0291fdb235..1b18f20ce4 100644
--- a/content/patterns/link/link-pattern.html
+++ b/content/patterns/link/link-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index 8e0c52866a..2689624519 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index 7c5f7a382b..37f8237441 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index 5e42f94967..a9500377ce 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index 4993432da1..56683c29c0 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/listbox.css" rel="stylesheet">
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
index 477e3bac18..3988a66f2a 100644
--- a/content/patterns/listbox/listbox-pattern.html
+++ b/content/patterns/listbox/listbox-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
index 1fbd72bbcd..5c7bde9003 100644
--- a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
+++ b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/menu-button-actions.css" rel="stylesheet">
diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html
index 0ceef8c69f..7ebfec5219 100644
--- a/content/patterns/menu-button/examples/menu-button-actions.html
+++ b/content/patterns/menu-button/examples/menu-button-actions.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/menu-button-actions.css" rel="stylesheet">
diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
index 18dc115046..8da261fc6d 100644
--- a/content/patterns/menu-button/examples/menu-button-links.html
+++ b/content/patterns/menu-button/examples/menu-button-links.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/menu-button-links.css" rel="stylesheet">
diff --git a/content/patterns/menu-button/menu-button-pattern.html b/content/patterns/menu-button/menu-button-pattern.html
index 57b96e3227..de0e4b42b0 100644
--- a/content/patterns/menu-button/menu-button-pattern.html
+++ b/content/patterns/menu-button/menu-button-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/menubar/examples/menubar-editor.html b/content/patterns/menubar/examples/menubar-editor.html
index 9366156c1f..ba03677cc3 100644
--- a/content/patterns/menubar/examples/menubar-editor.html
+++ b/content/patterns/menubar/examples/menubar-editor.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/menubar-editor.css" rel="stylesheet">
diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html
index 07a741a9d7..596d5e4863 100644
--- a/content/patterns/menubar/examples/menubar-navigation.html
+++ b/content/patterns/menubar/examples/menubar-navigation.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/menubar-navigation.css" rel="stylesheet">
diff --git a/content/patterns/menubar/menu-and-menubar-pattern.html b/content/patterns/menubar/menu-and-menubar-pattern.html
index e55e358899..123e8b9637 100644
--- a/content/patterns/menubar/menu-and-menubar-pattern.html
+++ b/content/patterns/menubar/menu-and-menubar-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/meter/examples/meter.html b/content/patterns/meter/examples/meter.html
index 042e8c8334..655b66bb9a 100644
--- a/content/patterns/meter/examples/meter.html
+++ b/content/patterns/meter/examples/meter.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/meter/meter-pattern.html b/content/patterns/meter/meter-pattern.html
index 5c0b424e44..6830ff3434 100644
--- a/content/patterns/meter/meter-pattern.html
+++ b/content/patterns/meter/meter-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index 23bc38bfb1..af085d4b4b 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
-    <script src="../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <h1>Patterns</h1>
diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
index 24d432496a..8dab142bca 100644
--- a/content/patterns/radio/examples/radio-activedescendant.html
+++ b/content/patterns/radio/examples/radio-activedescendant.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/radio.css">
diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html
index 05d94eced9..74e3f61442 100644
--- a/content/patterns/radio/examples/radio-rating.html
+++ b/content/patterns/radio/examples/radio-rating.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/radio-rating.css">
diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html
index 1026baf80c..901db42f44 100644
--- a/content/patterns/radio/examples/radio.html
+++ b/content/patterns/radio/examples/radio.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/radio.css">
diff --git a/content/patterns/radio/radio-group-pattern.html b/content/patterns/radio/radio-group-pattern.html
index e29917ec9d..8c476bd446 100644
--- a/content/patterns/radio/radio-group-pattern.html
+++ b/content/patterns/radio/radio-group-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/slider-multithumb/examples/slider-multithumb.html b/content/patterns/slider-multithumb/examples/slider-multithumb.html
index 2a24a2bd2a..c5d8560a6a 100644
--- a/content/patterns/slider-multithumb/examples/slider-multithumb.html
+++ b/content/patterns/slider-multithumb/examples/slider-multithumb.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/slider-multithumb.css">
diff --git a/content/patterns/slider-multithumb/slider-multithumb-pattern.html b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
index c9cd78d5ff..070f8b6f5b 100644
--- a/content/patterns/slider-multithumb/slider-multithumb-pattern.html
+++ b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
index 6fe6559ed7..2eadaa9777 100644
--- a/content/patterns/slider/examples/slider-color-viewer.html
+++ b/content/patterns/slider/examples/slider-color-viewer.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" type="text/css" href="css/slider-color-viewer.css">
diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html
index bb619bb937..1c7fb40a54 100644
--- a/content/patterns/slider/examples/slider-rating.html
+++ b/content/patterns/slider/examples/slider-rating.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" type="text/css" href="css/slider-rating.css">
diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html
index 5b589cd67f..a55aad4044 100644
--- a/content/patterns/slider/examples/slider-seek.html
+++ b/content/patterns/slider/examples/slider-seek.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/slider-seek.css">
diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html
index 54c9c7fbbe..6035f74266 100644
--- a/content/patterns/slider/examples/slider-temperature.html
+++ b/content/patterns/slider/examples/slider-temperature.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="css/slider-temperature.css">
diff --git a/content/patterns/slider/slider-pattern.html b/content/patterns/slider/slider-pattern.html
index 35d308de8a..e57ccfea49 100644
--- a/content/patterns/slider/slider-pattern.html
+++ b/content/patterns/slider/slider-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
index 85b7a30218..730d1bc3a7 100644
--- a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
+++ b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/spinbutton/spinbutton-pattern.html b/content/patterns/spinbutton/spinbutton-pattern.html
index 4cdc382a15..58f1f3e052 100644
--- a/content/patterns/spinbutton/spinbutton-pattern.html
+++ b/content/patterns/spinbutton/spinbutton-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html
index 9c21b13302..9f1f778d90 100644
--- a/content/patterns/switch/examples/switch-button.html
+++ b/content/patterns/switch/examples/switch-button.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/switch-button.css" rel="stylesheet">
diff --git a/content/patterns/switch/examples/switch-checkbox.html b/content/patterns/switch/examples/switch-checkbox.html
index fded8231c6..04b86b959f 100644
--- a/content/patterns/switch/examples/switch-checkbox.html
+++ b/content/patterns/switch/examples/switch-checkbox.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/switch-checkbox.css" rel="stylesheet">
diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html
index bf8aa0301e..85ab26a99e 100644
--- a/content/patterns/switch/examples/switch.html
+++ b/content/patterns/switch/examples/switch.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/switch.css" rel="stylesheet">
diff --git a/content/patterns/switch/switch-pattern.html b/content/patterns/switch/switch-pattern.html
index af02a1ce91..96c291f78f 100644
--- a/content/patterns/switch/switch-pattern.html
+++ b/content/patterns/switch/switch-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/table/examples/sortable-table.html b/content/patterns/table/examples/sortable-table.html
index 53a88fde61..80e18dd808 100644
--- a/content/patterns/table/examples/sortable-table.html
+++ b/content/patterns/table/examples/sortable-table.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/sortable-table.css" rel="stylesheet">
diff --git a/content/patterns/table/examples/table.html b/content/patterns/table/examples/table.html
index f717330760..dc3a5e5db0 100644
--- a/content/patterns/table/examples/table.html
+++ b/content/patterns/table/examples/table.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/table.css" rel="stylesheet">
diff --git a/content/patterns/table/table-pattern.html b/content/patterns/table/table-pattern.html
index 1dbed1c9a0..9902055d57 100644
--- a/content/patterns/table/table-pattern.html
+++ b/content/patterns/table/table-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/tabs/examples/tabs-automatic.html b/content/patterns/tabs/examples/tabs-automatic.html
index 96caf79edc..361cf69a2f 100644
--- a/content/patterns/tabs/examples/tabs-automatic.html
+++ b/content/patterns/tabs/examples/tabs-automatic.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/tabs.css" rel="stylesheet">
diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html
index e87d56654e..9da53c50d1 100644
--- a/content/patterns/tabs/examples/tabs-manual.html
+++ b/content/patterns/tabs/examples/tabs-manual.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/tabs.css" rel="stylesheet">
diff --git a/content/patterns/tabs/tabs-pattern.html b/content/patterns/tabs/tabs-pattern.html
index 150a87419e..3b0d405322 100644
--- a/content/patterns/tabs/tabs-pattern.html
+++ b/content/patterns/tabs/tabs-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/toolbar/examples/help.html b/content/patterns/toolbar/examples/help.html
index 7d876d5927..adcc0bbeb9 100644
--- a/content/patterns/toolbar/examples/help.html
+++ b/content/patterns/toolbar/examples/help.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html
index 6f7e4739a2..d6cb864d78 100644
--- a/content/patterns/toolbar/examples/toolbar.html
+++ b/content/patterns/toolbar/examples/toolbar.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/toolbar/toolbar-pattern.html b/content/patterns/toolbar/toolbar-pattern.html
index fe90633b3f..695d92868e 100644
--- a/content/patterns/toolbar/toolbar-pattern.html
+++ b/content/patterns/toolbar/toolbar-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/tooltip/tooltip-pattern.html b/content/patterns/tooltip/tooltip-pattern.html
index 8765296b9e..87652c11f3 100644
--- a/content/patterns/tooltip/tooltip-pattern.html
+++ b/content/patterns/tooltip/tooltip-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html
index 8a4646e701..f5335a9f8c 100644
--- a/content/patterns/treegrid/examples/treegrid-1.html
+++ b/content/patterns/treegrid/examples/treegrid-1.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/treegrid-1.css" rel="stylesheet">
diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html
index 1bf4f0c416..0ba629c652 100644
--- a/content/patterns/treegrid/treegrid-pattern.html
+++ b/content/patterns/treegrid/treegrid-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/treeview/examples/treeview-1a.html b/content/patterns/treeview/examples/treeview-1a.html
index 0372b614e8..c3f4aa3bc3 100644
--- a/content/patterns/treeview/examples/treeview-1a.html
+++ b/content/patterns/treeview/examples/treeview-1a.html
@@ -12,7 +12,7 @@
     <script src="../../../shared/js/utils.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/treeview/examples/treeview-1b.html b/content/patterns/treeview/examples/treeview-1b.html
index 907d358309..e937e4335a 100644
--- a/content/patterns/treeview/examples/treeview-1b.html
+++ b/content/patterns/treeview/examples/treeview-1b.html
@@ -12,7 +12,7 @@
     <script src="../../../shared/js/utils.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
diff --git a/content/patterns/treeview/examples/treeview-navigation.html b/content/patterns/treeview/examples/treeview-navigation.html
index fe61eff568..2efbeccdc9 100644
--- a/content/patterns/treeview/examples/treeview-navigation.html
+++ b/content/patterns/treeview/examples/treeview-navigation.html
@@ -11,7 +11,7 @@
     <script src="../../../shared/js/examples.js"></script>
     <script src="../../../shared/js/highlight.pack.js"></script>
     <script src="../../../shared/js/app.js"></script>
-    <script src="../../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
 
     <!-- JS and CSS for this example -->
     <link href="css/treeview-navigation.css" rel="stylesheet">
diff --git a/content/patterns/treeview/treeview-pattern.html b/content/patterns/treeview/treeview-pattern.html
index 328de9e603..1e8ee01dd3 100644
--- a/content/patterns/treeview/treeview-pattern.html
+++ b/content/patterns/treeview/treeview-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/patterns/windowsplitter/windowsplitter-pattern.html b/content/patterns/windowsplitter/windowsplitter-pattern.html
index 00e6239df3..8d78e89e6d 100644
--- a/content/patterns/windowsplitter/windowsplitter-pattern.html
+++ b/content/patterns/windowsplitter/windowsplitter-pattern.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/grid-and-table-properties/grid-and-table-properties-practice.html b/content/practices/grid-and-table-properties/grid-and-table-properties-practice.html
index 972cb95544..5a5d99f656 100644
--- a/content/practices/grid-and-table-properties/grid-and-table-properties-practice.html
+++ b/content/practices/grid-and-table-properties/grid-and-table-properties-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/hiding-semantics/hiding-semantics-practice.html b/content/practices/hiding-semantics/hiding-semantics-practice.html
index ee3cab11f9..a1cfd530d8 100644
--- a/content/practices/hiding-semantics/hiding-semantics-practice.html
+++ b/content/practices/hiding-semantics/hiding-semantics-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/keyboard-interface/keyboard-interface-practice.html b/content/practices/keyboard-interface/keyboard-interface-practice.html
index 9312727b40..ce83c87e71 100644
--- a/content/practices/keyboard-interface/keyboard-interface-practice.html
+++ b/content/practices/keyboard-interface/keyboard-interface-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/landmark-regions/landmark-regions-practice.html b/content/practices/landmark-regions/landmark-regions-practice.html
index 87ee9d44ff..28b5d216d3 100644
--- a/content/practices/landmark-regions/landmark-regions-practice.html
+++ b/content/practices/landmark-regions/landmark-regions-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/names-and-descriptions/names-and-descriptions-practice.html b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
index 91fc4b2e15..d57cc649a3 100644
--- a/content/practices/names-and-descriptions/names-and-descriptions-practice.html
+++ b/content/practices/names-and-descriptions/names-and-descriptions-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/practices.html b/content/practices/practices.html
index c045acebc1..3f31e1ce80 100644
--- a/content/practices/practices.html
+++ b/content/practices/practices.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="../shared/css/core.css">
     <script src="../shared/js/highlight.pack.js"></script>
     <script src="../shared/js/app.js"></script>
-    <script src="../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
   </head>
   <body>
     <h1>Practices</h1>
diff --git a/content/practices/range-related-properties/range-related-properties-practice.html b/content/practices/range-related-properties/range-related-properties-practice.html
index 9fe2bfdbc0..47f434d362 100644
--- a/content/practices/range-related-properties/range-related-properties-practice.html
+++ b/content/practices/range-related-properties/range-related-properties-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/read-me-first/read-me-first-practice.html b/content/practices/read-me-first/read-me-first-practice.html
index 716939efd1..15b9f6df6d 100644
--- a/content/practices/read-me-first/read-me-first-practice.html
+++ b/content/practices/read-me-first/read-me-first-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/practices/structural-roles/structural-roles-practice.html b/content/practices/structural-roles/structural-roles-practice.html
index c40a9b154f..0248c85615 100644
--- a/content/practices/structural-roles/structural-roles-practice.html
+++ b/content/practices/structural-roles/structural-roles-practice.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
-    <script src="../../shared/js/skipto.js"></script>
+    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
     <main>
diff --git a/content/shared/js/skipto.js b/content/shared/js/skipto.js
index 29134ff415..d5bc6b29bb 100644
--- a/content/shared/js/skipto.js
+++ b/content/shared/js/skipto.js
@@ -1,117 +1,117 @@
-/* ========================================================================
- * Version: 5.1.6
- * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
- * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
- * All rights reserved.
- * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
- * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *
- * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
- * Code: https://github.com/skipto-landmarks-headings/page-script-5
- * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
- * ======================================================================== */
-
-(function () {
-  'use strict';
-
-  /*
-  *   debug.js
-  *
-  *   Usage
-  *     import DebugLogging from './debug.js';
-  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
-  *     ...
-  *     if (debug.flag) debug.log('myMessage');
-  *
-  *   Notes
-  *     new DebugLogging() - calling the constructor with no arguments results
-  *                   in debug.flag set to false and debug.label set to 'debug';
-  *                   constructor accepts 0, 1 or 2 arguments in any order
-  *                   @param flag [optional] {boolean} - sets debug.flag
-  *                   @param label [optional] {string} - sets debug.label
-  *   Properties
-  *     debug.flag    {boolean} allows you to switch debug logging on or off;
-  *                   default value is false
-  *     debug.label   {string} rendered as a prefix to each log message;
-  *                   default value is 'debug'
-  *   Methods
-  *     debug.log        calls console.log with label prefix and message
-  *                      @param message {object} - console.log calls toString()
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.tag        outputs tagName and textContent of DOM element
-  *                      @param node {DOM node reference} - usually an HTMLElement
-  *                      @param spaceAbove [optional] {boolean}
-  *
-  *     debug.separator  outputs only debug.label and a series of hyphens
-  *                      @param spaceAbove [optional] {boolean}
-  */
-
-  class DebugLogging {
-    constructor (...args) {
-      // Default values for cases where fewer than two arguments are provided
-      this._flag = false;
-      this._label = 'debug';
-
-      // The constructor may be called with zero, one or two arguments. If two
-      // arguments, they can be in any order: one is assumed to be the boolean
-      // value for '_flag' and the other one the string value for '_label'.
-      for (const [index, arg] of args.entries()) {
-        if (index < 2) {
-          switch (typeof arg) {
-            case 'boolean':
-              this._flag = arg;
-              break;
-            case 'string':
-              this._label = arg;
-              break;
-          }
-        }
-      }
-    }
-
-    get flag () { return this._flag; }
-
-    set flag (value) {
-      if (typeof value === 'boolean') {
-        this._flag = value;
-      }
-    }
-
-    get label () { return this._label; }
-
-    set label (value) {
-      if (typeof value === 'string') {
-        this._label = value;
-      }
-    }
-
-    log (message, spaceAbove) {
-      const newline = spaceAbove ? '\n' : '';
-      console.log(`${newline}[${this._label}] ${message}`);
-    }
-
-    tag (node, spaceAbove) {
-      if (node && node.tagName) {
-        const text = node.textContent.trim().replace(/\s+/g, ' ');
-        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
-      }
-    }
-
-    separator (spaceAbove) {
-      this.log('-----------------------------', spaceAbove);
-    }
-
-  }
-
+/* ========================================================================
+ * Version: 5.2.1
+ * Copyright (c) 2022, 2023 Jon Gunderson; Licensed BSD
+ * Copyright (c) 2021 PayPal Accessibility Team and University of Illinois; Licensed BSD
+ * All rights reserved.
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ * Neither the name of PayPal or any of its subsidiaries or affiliates, nor the name of the University of Illinois, nor the names of any other contributors contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * Documenation: https://skipto-landmarks-headings.github.io/page-script-5
+ * Code: https://github.com/skipto-landmarks-headings/page-script-5
+ * Report Issues: https://github.com/skipto-landmarks-headings/page-script-5/issues
+ * ======================================================================== */
+
+(function () {
+  'use strict';
+
+  /*
+  *   debug.js
+  *
+  *   Usage
+  *     import DebugLogging from './debug.js';
+  *     const debug = new DebugLogging('myLabel', true); // e.g. 'myModule'
+  *     ...
+  *     if (debug.flag) debug.log('myMessage');
+  *
+  *   Notes
+  *     new DebugLogging() - calling the constructor with no arguments results
+  *                   in debug.flag set to false and debug.label set to 'debug';
+  *                   constructor accepts 0, 1 or 2 arguments in any order
+  *                   @param flag [optional] {boolean} - sets debug.flag
+  *                   @param label [optional] {string} - sets debug.label
+  *   Properties
+  *     debug.flag    {boolean} allows you to switch debug logging on or off;
+  *                   default value is false
+  *     debug.label   {string} rendered as a prefix to each log message;
+  *                   default value is 'debug'
+  *   Methods
+  *     debug.log        calls console.log with label prefix and message
+  *                      @param message {object} - console.log calls toString()
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.tag        outputs tagName and textContent of DOM element
+  *                      @param node {DOM node reference} - usually an HTMLElement
+  *                      @param spaceAbove [optional] {boolean}
+  *
+  *     debug.separator  outputs only debug.label and a series of hyphens
+  *                      @param spaceAbove [optional] {boolean}
+  */
+
+  class DebugLogging {
+    constructor (...args) {
+      // Default values for cases where fewer than two arguments are provided
+      this._flag = false;
+      this._label = 'debug';
+
+      // The constructor may be called with zero, one or two arguments. If two
+      // arguments, they can be in any order: one is assumed to be the boolean
+      // value for '_flag' and the other one the string value for '_label'.
+      for (const [index, arg] of args.entries()) {
+        if (index < 2) {
+          switch (typeof arg) {
+            case 'boolean':
+              this._flag = arg;
+              break;
+            case 'string':
+              this._label = arg;
+              break;
+          }
+        }
+      }
+    }
+
+    get flag () { return this._flag; }
+
+    set flag (value) {
+      if (typeof value === 'boolean') {
+        this._flag = value;
+      }
+    }
+
+    get label () { return this._label; }
+
+    set label (value) {
+      if (typeof value === 'string') {
+        this._label = value;
+      }
+    }
+
+    log (message, spaceAbove) {
+      const newline = spaceAbove ? '\n' : '';
+      console.log(`${newline}[${this._label}] ${message}`);
+    }
+
+    tag (node, spaceAbove) {
+      if (node && node.tagName) {
+        const text = node.textContent.trim().replace(/\s+/g, ' ');
+        this.log(`[${node.tagName}]: ${text.substring(0, 40)}`, spaceAbove);
+      }
+    }
+
+    separator (spaceAbove) {
+      this.log('-----------------------------', spaceAbove);
+    }
+
+  }
+
   /* style.js */
 
   /* Constants */
-  const debug$5 = new DebugLogging('style', false);
-  debug$5.flag = false;
+  const debug$6 = new DebugLogging('style', false);
+  debug$6.flag = false;
 
   const styleTemplate = document.createElement('template');
   styleTemplate.innerHTML = `
@@ -229,10 +229,11 @@ $skipToId [role="menuitem"] .label {
   font-size: 100%;
   font-weight: normal;
   color: $menuTextColor;
-  display: inline-block;
   background-color: $menuBackgroundColor;
+  display: inline-block;
   line-height: inherit;
   display: inline-block;
+  white-space: nowrap;
 }
 
 $skipToId [role="menuitem"] .level {
@@ -244,7 +245,6 @@ $skipToId [role="menuitem"] .label {
   text-align: left;
   margin: 0;
   padding: 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -532,452 +532,452 @@ $skipToId [role="menuitem"]:focus .label {
     styleNode.id = `${skipToId}-style`;
     const headNode = document.getElementsByTagName('head')[0];
     headNode.appendChild(styleNode);
-  }
-
-  /* utils.js */
-
-  /* Constants */
-  const debug$4 = new DebugLogging('Utils', false);
-  debug$4.flag = false;
-
-
-  /*
-   * @function getAttributeValue
-   * 
-   * @desc Return attribute value if present on element,
-   *       otherwise return empty string.
-   *
-   * @returns {String} see @desc
-   */
-  function getAttributeValue (element, attribute) {
-    let value = element.getAttribute(attribute);
-    return (value === null) ? '' : normalize(value);
-  }
-
-  /*
-   * @function normalize
-   *
-   * @desc Trim leading and trailing whitespace and condense all
-   *       internal sequences of whitespace to a single space. Adapted from
-   *       Mozilla documentation on String.prototype.trim polyfill. Handles
-   *       BOM and NBSP characters.
-   *
-   * @return {String}  see @desc
-   */
-  function normalize (s) {
-    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
-    return s.replace(rtrim, '').replace(/\s+/g, ' ');
-  }
-
-  /**
-   * @fuction isNotEmptyString
-   *
-   * @desc Returns true if the string has content, otherwise false
-   *
-   * @param {Boolean}  see @desc
-   */
-  function isNotEmptyString (str) {
-    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
-  }
-
-  /**
-   * @fuction isVisible
-   *
-   * @desc Returns true if the element is visible in the graphical rendering 
-   *
-   * @param {node}  elem  - DOM element node of a labelable element
-   */
-  function isVisible (element) {
-
-    function isDisplayNone(el) {
-      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
-        return false;
-      }
-
-      if (el.hasAttribute('hidden')) {
-        return true;
-      }
-
-      const style = window.getComputedStyle(el, null);
-      const display = style.getPropertyValue("display");
-      if (display === 'none') { 
-        return true;
-      }
-
-      // check ancestors for display none
-      if (el.parentNode) {
-        return isDisplayNone(el.parentNode);
-      }
-
-      return false;
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    let visibility = computedStyle.getPropertyValue('visibility');
-    if ((visibility === 'hidden') || (visibility === 'collapse')) {
-      return false;
-    }
-
-    return !isDisplayNone(element);
-  }
-
-  /*
-  *   namefrom.js
-  */
-
-  /* constants */
-
-  const debug$3 = new DebugLogging('nameFrom', false);
-  debug$3.flag = false;
-
-  //
-  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
-
-  /*
-  *   @function  isDisplayNone 
-  *
-  *   @desc Returns true if the element or parent element has set the CSS
-  *         display property to none or has the hidden attribute,
-  *         otherwise false
-  *
-  *   @param  {Object}  node  - a DOM node
-  *
-  *   @returns  {Boolean} see @desc 
-  */
-
-  function isDisplayNone (node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-
-      if (node.hasAttribute('hidden')) {
-        return true;
-      }
-
-      // aria-hidden attribute with the value "true" is an same as 
-      // setting the hidden attribute for name calcuation
-      if (node.hasAttribute('aria-hidden')) {
-        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
-          return true;
-        }
-      }
-
-      const style = window.getComputedStyle(node, null);
-
-      const display = style.getPropertyValue("display");
-
-      if (display) {
-        return display === 'none';
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isVisibilityHidden 
-  *   
-  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
-  *         property set to "hidden" or "collapse", otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isVisibilityHidden(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-      node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const style = window.getComputedStyle(node, null);
-
-      const visibility = style.getPropertyValue("visibility");
-      if (visibility) {
-        return (visibility === 'hidden') || (visibility === 'collapse');
-      }
-    }
-    return false;
-  }
-
-  /*
-  *   @function isAriaHiddenFalse 
-  *   
-  *   @desc Returns true if the node has the aria-hidden property set to
-  *         "false", otherwise false.  
-  *         NOTE: This function is important in the accessible namce 
-  *               calculation, since content hidden with a CSS technique 
-  *               can be included in the accessible name calculation when 
-  *               aria-hidden is set to false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function isAriaHIddenFalse(node) {
-
-    if (!node) {
-      return false;
-    }
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentNode;
-    }
-
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return (node.hasAttribute('aria-hidden') && 
-          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function includeContentInName 
-  *   
-  *   @desc Checks the CSS display and hidden properties, and
-  *         the aria-hidden property to see if the content
-  *         should be included in the accessible name
-  *        calculation.  Returns true if it should be 
-  *         included, otherwise false
-  *
-  *   @param  {Object}   node  -  DOM node
-  *
-  *   @return  see @desc
-  */
-
-  function includeContentInName(node) {
-    const flag = isAriaHIddenFalse(node) || 
-      (!isVisibilityHidden(node) && 
-      !isDisplayNone(node));
-    return flag;
-  }
-
-  /*
-  *   @function getNodeContents
-  *
-  *   @desc  Recursively process element and text nodes by aggregating
-  *          their text values for an ARIA accessible name or description
-  *          calculation.
-  *
-  *          NOTE: This includes special handling of elements with 'alt' 
-  *                text and embedded controls.
-  *  
-  *  @param {Object}  node  - A DOM node
-  * 
-  *  @return {String}  The text content for an accessible name or description
-  */
-  function getNodeContents (node) {
-    let contents = '';
-    let nc;
-    let arr = [];
-
-    switch (node.nodeType) {
-      case Node.ELEMENT_NODE:
-        // If aria-label is present, node recursion stops and
-        // aria-label value is returned
-        if (node.hasAttribute('aria-label')) {
-          if (includeContentInName(node)) {
-            contents = node.getAttribute('aria-label');
-          }
-        }
-        else {
-          if (node instanceof HTMLSlotElement) {
-            // if no slotted elements, check for default slotted content
-            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
-            assignedNodes.forEach( assignedNode => {
-              nc = getNodeContents(assignedNode);
-              if (nc.length) arr.push(nc);
-            });
-            contents = (arr.length) ? arr.join(' ') : '';
-          } else {
-            if (couldHaveAltText(node) && includeContentInName(node)) {
-              contents = getAttributeValue(node, 'alt');
-            }
-            else {
-              if (node.hasChildNodes()) {
-                let children = Array.from(node.childNodes);
-                children.forEach( child => {
-                  nc = getNodeContents(child);
-                  if (nc.length) arr.push(nc);
-                });
-                contents = (arr.length) ? arr.join(' ') : '';
-              }
-            }
-            // For all branches of the ELEMENT_NODE case...
-          }
-        }
-        contents = addCssGeneratedContent(node, contents);
-        break;
-
-      case Node.TEXT_NODE:
-        if (includeContentInName(node)) {
-          contents = normalize(node.textContent);
-        }
-        break;
-    }
-
-    return contents;
-  }
-
-  /*
-  *   @function couldHaveAltText
-  *   
-  *   @desc  Based on HTML5 specification, returns true if 
-  *          the element could have an 'alt' attribute,
-  *          otherwise false.
-  * 
-  *   @param  {Object}  element  - DOM eleemnt node
-  *
-  *   @return {Boolean}  see @desc
-  */
-  function couldHaveAltText (element) {
-    let tagName = element.tagName.toLowerCase();
-
-    switch (tagName) {
-      case 'img':
-      case 'area':
-        return true;
-      case 'input':
-        return (element.type && element.type === 'image');
-    }
-
-    return false;
-  }
-
-  /*
-  *   @function addCssGeneratedContent
-  *
-  *   @desc Adds CSS-generated content for pseudo-elements
-  *         :before and :after. According to the CSS spec, test that content 
-  *         value is other than the default computed value of 'none'.
-  * 
-  *         Note: Even if an author specifies content: 'none', because browsers 
-  *               add the double-quote character to the beginning and end of 
-  *               computed string values, the result cannot and will not be 
-  *               equal to 'none'.
-  *
-  *
-  *   @param {Object}  element   - DOM node element
-  *   @param {String}  contents  - Text content for DOM node
-  *
-  *   @returns  {String}  see @desc
-  *
-  */
-  function addCssGeneratedContent (element, contents) {
-
-    let result = contents,
-        prefix = getComputedStyle(element, ':before').content,
-        suffix = getComputedStyle(element, ':after').content;
-
-    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
-      result = prefix.substring(1, (prefix.length-1)) + result;
-    }
-
-    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
-      result = result + suffix.substring(1, (suffix.length-1)) ;
-    }
-
-    return result;
-  }
-
-  /* accName.js */
-
-  /* Constants */
-  const debug$2 = new DebugLogging('accName', false);
-  debug$2.flag = false;
-
-  /**
-   *   @fuction getAccessibleName
-   *
-   *   @desc Returns the accessible name for an heading or landamrk 
-   *
-   *   @paramn {Object}   dom      - Document of the current element
-   *   @param  {node}     element  - DOM element node for either a heading or
-   *                               landmark
-   *   @param  {Boolean}  fromContent  - if true will compute name from content
-   * 
-   *   @return {String} The accessible name for the landmark or heading element
-   */
-
-  function getAccessibleName (doc, element, fromContent=false) {
-    let accName = '';
-
-    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
-
-    if (accName === '' && element.hasAttribute('aria-label')) {
-      accName =  element.getAttribute('aria-label').trim();
-    }
-
-    if (accName === '' && fromContent) {
-      accName =  getNodeContents(element);
-    }
-
-    if (accName === '' && element.title.trim() !== '') {
-      accName = element.title.trim();
-    }
-
-    return accName;
-  }
-
-  /*
-  *   @function nameFromAttributeIdRefs
-  *
-  *   @desc Get the value of attrName on element (a space-
-  *         separated list of IDREFs), visit each referenced element in the order it
-  *         appears in the list and obtain its accessible name (skipping recursive
-  *         aria-labelledby or aria-describedby calculations), and return an object
-  *         with name property set to a string that is a space-separated concatena-
-  *         tion of those results if any, otherwise return empty string.
-  *
-  *   @param {Object}  doc       -  Browser document object
-  *   @param {Object}  element   -  DOM element node
-  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
-  *                                 or "aria-errormessage")
-  *
-  *   @returns {String} see @desc 
-  */
-  function nameFromAttributeIdRefs (doc, element, attribute) {
-    const value = getAttributeValue(element, attribute);
-    const arr = [];
-
-    if (value.length) {
-      const idRefs = value.split(' ');
-
-      for (let i = 0; i < idRefs.length; i++) {
-        const refElement = doc.getElementById(idRefs[i]);
-        if (refElement) {
-          const accName = getNodeContents(refElement);
-          if (accName && accName.length) arr.push(accName);
-        }
-      }
-    }
-
-    if (arr.length) {
-      return arr.join(' ');
-    }
-
-    return '';
-  }
-
+  }
+
+  /* utils.js */
+
+  /* Constants */
+  const debug$5 = new DebugLogging('Utils', false);
+  debug$5.flag = false;
+
+
+  /*
+   * @function getAttributeValue
+   * 
+   * @desc Return attribute value if present on element,
+   *       otherwise return empty string.
+   *
+   * @returns {String} see @desc
+   */
+  function getAttributeValue (element, attribute) {
+    let value = element.getAttribute(attribute);
+    return (value === null) ? '' : normalize(value);
+  }
+
+  /*
+   * @function normalize
+   *
+   * @desc Trim leading and trailing whitespace and condense all
+   *       internal sequences of whitespace to a single space. Adapted from
+   *       Mozilla documentation on String.prototype.trim polyfill. Handles
+   *       BOM and NBSP characters.
+   *
+   * @return {String}  see @desc
+   */
+  function normalize (s) {
+    let rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
+    return s.replace(rtrim, '').replace(/\s+/g, ' ');
+  }
+
+  /**
+   * @fuction isNotEmptyString
+   *
+   * @desc Returns true if the string has content, otherwise false
+   *
+   * @param {Boolean}  see @desc
+   */
+  function isNotEmptyString (str) {
+    return (typeof str === 'string') && str.length && str.trim() && str !== "&nbsp;";
+  }
+
+  /**
+   * @fuction isVisible
+   *
+   * @desc Returns true if the element is visible in the graphical rendering 
+   *
+   * @param {node}  elem  - DOM element node of a labelable element
+   */
+  function isVisible (element) {
+
+    function isDisplayNone(el) {
+      if (!el || (el.nodeType !== Node.ELEMENT_NODE)) {
+        return false;
+      }
+
+      if (el.hasAttribute('hidden')) {
+        return true;
+      }
+
+      const style = window.getComputedStyle(el, null);
+      const display = style.getPropertyValue("display");
+      if (display === 'none') { 
+        return true;
+      }
+
+      // check ancestors for display none
+      if (el.parentNode) {
+        return isDisplayNone(el.parentNode);
+      }
+
+      return false;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    let visibility = computedStyle.getPropertyValue('visibility');
+    if ((visibility === 'hidden') || (visibility === 'collapse')) {
+      return false;
+    }
+
+    return !isDisplayNone(element);
+  }
+
+  /*
+  *   namefrom.js
+  */
+
+  /* constants */
+
+  const debug$4 = new DebugLogging('nameFrom', false);
+  debug$4.flag = false;
+
+  //
+  // LOW-LEVEL HELPER FUNCTIONS (NOT EXPORTED)
+
+  /*
+  *   @function  isDisplayNone 
+  *
+  *   @desc Returns true if the element or parent element has set the CSS
+  *         display property to none or has the hidden attribute,
+  *         otherwise false
+  *
+  *   @param  {Object}  node  - a DOM node
+  *
+  *   @returns  {Boolean} see @desc 
+  */
+
+  function isDisplayNone (node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+
+      if (node.hasAttribute('hidden')) {
+        return true;
+      }
+
+      // aria-hidden attribute with the value "true" is an same as 
+      // setting the hidden attribute for name calcuation
+      if (node.hasAttribute('aria-hidden')) {
+        if (node.getAttribute('aria-hidden').toLowerCase()  === 'true') {
+          return true;
+        }
+      }
+
+      const style = window.getComputedStyle(node, null);
+
+      const display = style.getPropertyValue("display");
+
+      if (display) {
+        return display === 'none';
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isVisibilityHidden 
+  *   
+  *   @desc Returns true if the node (or it's parrent) has the CSS visibility 
+  *         property set to "hidden" or "collapse", otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isVisibilityHidden(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const style = window.getComputedStyle(node, null);
+
+      const visibility = style.getPropertyValue("visibility");
+      if (visibility) {
+        return (visibility === 'hidden') || (visibility === 'collapse');
+      }
+    }
+    return false;
+  }
+
+  /*
+  *   @function isAriaHiddenFalse 
+  *   
+  *   @desc Returns true if the node has the aria-hidden property set to
+  *         "false", otherwise false.  
+  *         NOTE: This function is important in the accessible namce 
+  *               calculation, since content hidden with a CSS technique 
+  *               can be included in the accessible name calculation when 
+  *               aria-hidden is set to false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function isAriaHIddenFalse(node) {
+
+    if (!node) {
+      return false;
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+        node = node.parentNode;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      return (node.hasAttribute('aria-hidden') && 
+          (node.getAttribute('aria-hidden').toLowerCase() === 'false'));
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function includeContentInName 
+  *   
+  *   @desc Checks the CSS display and hidden properties, and
+  *         the aria-hidden property to see if the content
+  *         should be included in the accessible name
+  *        calculation.  Returns true if it should be 
+  *         included, otherwise false
+  *
+  *   @param  {Object}   node  -  DOM node
+  *
+  *   @return  see @desc
+  */
+
+  function includeContentInName(node) {
+    const flag = isAriaHIddenFalse(node) || 
+      (!isVisibilityHidden(node) && 
+      !isDisplayNone(node));
+    return flag;
+  }
+
+  /*
+  *   @function getNodeContents
+  *
+  *   @desc  Recursively process element and text nodes by aggregating
+  *          their text values for an ARIA accessible name or description
+  *          calculation.
+  *
+  *          NOTE: This includes special handling of elements with 'alt' 
+  *                text and embedded controls.
+  *  
+  *  @param {Object}  node  - A DOM node
+  * 
+  *  @return {String}  The text content for an accessible name or description
+  */
+  function getNodeContents (node) {
+    let contents = '';
+    let nc;
+    let arr = [];
+
+    switch (node.nodeType) {
+      case Node.ELEMENT_NODE:
+        // If aria-label is present, node recursion stops and
+        // aria-label value is returned
+        if (node.hasAttribute('aria-label')) {
+          if (includeContentInName(node)) {
+            contents = node.getAttribute('aria-label');
+          }
+        }
+        else {
+          if (node instanceof HTMLSlotElement) {
+            // if no slotted elements, check for default slotted content
+            const assignedNodes = node.assignedNodes().length ? node.assignedNodes() : node.assignedNodes({ flatten: true });
+            assignedNodes.forEach( assignedNode => {
+              nc = getNodeContents(assignedNode);
+              if (nc.length) arr.push(nc);
+            });
+            contents = (arr.length) ? arr.join(' ') : '';
+          } else {
+            if (couldHaveAltText(node) && includeContentInName(node)) {
+              contents = getAttributeValue(node, 'alt');
+            }
+            else {
+              if (node.hasChildNodes()) {
+                let children = Array.from(node.childNodes);
+                children.forEach( child => {
+                  nc = getNodeContents(child);
+                  if (nc.length) arr.push(nc);
+                });
+                contents = (arr.length) ? arr.join(' ') : '';
+              }
+            }
+            // For all branches of the ELEMENT_NODE case...
+          }
+        }
+        contents = addCssGeneratedContent(node, contents);
+        break;
+
+      case Node.TEXT_NODE:
+        if (includeContentInName(node)) {
+          contents = normalize(node.textContent);
+        }
+        break;
+    }
+
+    return contents;
+  }
+
+  /*
+  *   @function couldHaveAltText
+  *   
+  *   @desc  Based on HTML5 specification, returns true if 
+  *          the element could have an 'alt' attribute,
+  *          otherwise false.
+  * 
+  *   @param  {Object}  element  - DOM eleemnt node
+  *
+  *   @return {Boolean}  see @desc
+  */
+  function couldHaveAltText (element) {
+    let tagName = element.tagName.toLowerCase();
+
+    switch (tagName) {
+      case 'img':
+      case 'area':
+        return true;
+      case 'input':
+        return (element.type && element.type === 'image');
+    }
+
+    return false;
+  }
+
+  /*
+  *   @function addCssGeneratedContent
+  *
+  *   @desc Adds CSS-generated content for pseudo-elements
+  *         :before and :after. According to the CSS spec, test that content 
+  *         value is other than the default computed value of 'none'.
+  * 
+  *         Note: Even if an author specifies content: 'none', because browsers 
+  *               add the double-quote character to the beginning and end of 
+  *               computed string values, the result cannot and will not be 
+  *               equal to 'none'.
+  *
+  *
+  *   @param {Object}  element   - DOM node element
+  *   @param {String}  contents  - Text content for DOM node
+  *
+  *   @returns  {String}  see @desc
+  *
+  */
+  function addCssGeneratedContent (element, contents) {
+
+    let result = contents,
+        prefix = getComputedStyle(element, ':before').content,
+        suffix = getComputedStyle(element, ':after').content;
+
+    if ((prefix[0] === '"') && !prefix.toLowerCase().includes('moz-')) {
+      result = prefix.substring(1, (prefix.length-1)) + result;
+    }
+
+    if ((suffix[0] === '"') && !suffix.toLowerCase().includes('moz-')) {
+      result = result + suffix.substring(1, (suffix.length-1)) ;
+    }
+
+    return result;
+  }
+
+  /* accName.js */
+
+  /* Constants */
+  const debug$3 = new DebugLogging('accName', false);
+  debug$3.flag = false;
+
+  /**
+   *   @fuction getAccessibleName
+   *
+   *   @desc Returns the accessible name for an heading or landamrk 
+   *
+   *   @paramn {Object}   dom      - Document of the current element
+   *   @param  {node}     element  - DOM element node for either a heading or
+   *                               landmark
+   *   @param  {Boolean}  fromContent  - if true will compute name from content
+   * 
+   *   @return {String} The accessible name for the landmark or heading element
+   */
+
+  function getAccessibleName (doc, element, fromContent=false) {
+    let accName = '';
+
+    accName = nameFromAttributeIdRefs(doc, element, 'aria-labelledby');
+
+    if (accName === '' && element.hasAttribute('aria-label')) {
+      accName =  element.getAttribute('aria-label').trim();
+    }
+
+    if (accName === '' && fromContent) {
+      accName =  getNodeContents(element);
+    }
+
+    if (accName === '' && element.title.trim() !== '') {
+      accName = element.title.trim();
+    }
+
+    return accName;
+  }
+
+  /*
+  *   @function nameFromAttributeIdRefs
+  *
+  *   @desc Get the value of attrName on element (a space-
+  *         separated list of IDREFs), visit each referenced element in the order it
+  *         appears in the list and obtain its accessible name (skipping recursive
+  *         aria-labelledby or aria-describedby calculations), and return an object
+  *         with name property set to a string that is a space-separated concatena-
+  *         tion of those results if any, otherwise return empty string.
+  *
+  *   @param {Object}  doc       -  Browser document object
+  *   @param {Object}  element   -  DOM element node
+  *   @param {String}  attribute -  Attribute name (e.g. "aria-labelledby", "aria-describedby",
+  *                                 or "aria-errormessage")
+  *
+  *   @returns {String} see @desc 
+  */
+  function nameFromAttributeIdRefs (doc, element, attribute) {
+    const value = getAttributeValue(element, attribute);
+    const arr = [];
+
+    if (value.length) {
+      const idRefs = value.split(' ');
+
+      for (let i = 0; i < idRefs.length; i++) {
+        const refElement = doc.getElementById(idRefs[i]);
+        if (refElement) {
+          const accName = getNodeContents(refElement);
+          if (accName && accName.length) arr.push(accName);
+        }
+      }
+    }
+
+    if (arr.length) {
+      return arr.join(' ');
+    }
+
+    return '';
+  }
+
   /* landmarksHeadings.js */
 
   /* Constants */
-  const debug$1 = new DebugLogging('landmarksHeadings', false);
-  debug$1.flag = false;
+  const debug$2 = new DebugLogging('landmarksHeadings', false);
+  debug$2.flag = false;
 
   const skipableElements = [
     'base',
@@ -1789,13 +1789,13 @@ $skipToId [role="menuitem"]:focus .label {
       }
     }
     return [].concat(mainElements, searchElements, navElements, asideElements, regionElements, footerElements, otherElements);
-  }
-
+  }
+
   /* skiptoMenuButton.js */
 
   /* Constants */
-  const debug = new DebugLogging('SkipToButton', false);
-  debug.flag = false;
+  const debug$1 = new DebugLogging('SkipToButton', false);
+  debug$1.flag = false;
 
   /**
    * @class SkiptoMenuButton
@@ -2530,7 +2530,11 @@ $skipToId [role="menuitem"]:focus .label {
           }
         }
       }
-  }
+  }
+
+  /* constants */
+  const debug = new DebugLogging('skipto', false);
+  debug.flag = true;
 
   (function() {
 
@@ -2554,9 +2558,9 @@ $skipToId [role="menuitem"]:focus .label {
         altShortcut: '0', // default shortcut key is the number zero
         optionShortcut: 'º', // default shortcut key character associated with option+0 on mac 
         attachElement: 'body',
-        displayOption: 'popup', // options: static (default), popup, fixed
+        displayOption: 'static', // options: static (default), popup, fixed
         // container element, use containerClass for custom styling
-        containerElement: 'div',
+        containerElement: 'nav',
         containerRole: '',
         customClass: '',
 
@@ -2589,7 +2593,7 @@ $skipToId [role="menuitem"]:focus .label {
         headings: 'main h1 h2',
 
         // Place holders for configuration
-        colorTheme: 'aria',
+        colorTheme: '',
         fontFamily: '',
         fontSize: '',
         positionLeft: '',
@@ -2694,7 +2698,7 @@ $skipToId [role="menuitem"]:focus .label {
        * @param  {object} config - Reference to configuration object
        *                           can be undefined
        */
-      init: function(config) {
+      init: function(globalConfig) {
         let node;
 
         // Check if skipto is already loaded
@@ -2706,9 +2710,13 @@ $skipToId [role="menuitem"]:focus .label {
         document.skipToHasBeenLoaded = true;
 
         let attachElement = document.body;
-        if (config) {
-          this.setupConfig(config);
+
+        if (globalConfig) {
+          this.config = this.setupConfigFromGlobal(this.config, globalConfig);
         }
+
+        this.config = this.setupConfigFromDataAttribute(this.config);
+
         if (typeof this.config.attachElement === 'string') {
           node = document.querySelector(this.config.attachElement);
           if (node && node.nodeType === Node.ELEMENT_NODE) {
@@ -2722,45 +2730,92 @@ $skipToId [role="menuitem"]:focus .label {
       },
 
       /*
-       * @method setupConfig
+       * @method setupConfigFromGlobal
        *
-       * @desc Get configuration information from user configuration to change 
+       * @desc Get configuration information from author configuration to change
        *       default settings 
        *
-       * @param  {object}  appConfig - Javascript object with configuration information
+       * @param  {object}  config       - Javascript object with default configuration information
+       * @param  {object}  globalConfig - Javascript object with configuration information oin a global variable
        */
-      setupConfig: function(appConfig) {
-        let appConfigSettings;
+      setupConfigFromGlobal: function(config, globalConfig) {
+        let authorConfig = {};
         // Support version 4.1 configuration object structure 
         // If found use it
-        if ((typeof appConfig.settings === 'object') && 
-            (typeof appConfig.settings.skipTo === 'object')) {
-          appConfigSettings = appConfig.settings.skipTo;
+        if ((typeof globalConfig.settings === 'object') &&
+            (typeof globalConfig.settings.skipTo === 'object')) {
+          authorConfig = globalConfig.settings.skipTo;
         }
         else {
           // Version 5.0 removes the requirement for the "settings" and "skipto" properties
           // to reduce the complexity of configuring skipto
-          if ((typeof appConfig === 'undefined') || 
-               (typeof appConfig !== 'object')) {
-            appConfigSettings = {};
+          if (typeof globalConfig === 'object') {
+            authorConfig = globalConfig;
           }
-          else {
-            appConfigSettings = appConfig;
+        }
+
+        for (const name in authorConfig) {
+          //overwrite values of our local config, based on the external config
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof authorConfig[name] === 'string') &&
+              (authorConfig[name].length > 0 ) ||
+             typeof authorConfig[name] === 'boolean')
+            ) {
+            config[name] = authorConfig[name];
+          } else {
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in global configuration object: ' + name);
+          }
+        }
+
+        return config;
+      },
+
+      /*
+       * @method setupConfigFromDataAttribute
+       *
+       * @desc Get configuration information from author configuration to change
+       *       default settings
+       *
+       * @param  {object}  config - Javascript object with default configuration information
+       */
+      setupConfigFromDataAttribute: function(config) {
+        let dataConfig = {};
+
+        // Check for data-skipto attribute values for configuration
+        const configElem = document.querySelector('[data-skipto]');
+        if (configElem) {
+          const dataSkiptoValue = configElem.getAttribute('data-skipto');
+          if (dataSkiptoValue) {
+            const values = dataSkiptoValue.split(';');
+            values.forEach( v => {
+              let [prop, value] = v.split(':');
+              if (prop) {
+                prop = prop.trim();
+              }
+              if (value) {
+                value = value.trim();
+              }
+              if (prop && value) {
+                dataConfig[prop] = value;
+              }
+            });
           }
         }
 
-        for (const name in appConfigSettings) {
+        for (const name in dataConfig) {
           //overwrite values of our local config, based on the external config
-          if ((typeof this.config[name] !== 'undefined') &&
-             ((typeof appConfigSettings[name] === 'string') &&
-              (appConfigSettings[name].length > 0 ) ||
-             typeof appConfigSettings[name] === 'boolean')
+          if ((typeof config[name] !== 'undefined') &&
+             ((typeof dataConfig[name] === 'string') &&
+              (dataConfig[name].length > 0 ) ||
+             typeof dataConfig[name] === 'boolean')
             ) {
-            this.config[name] = appConfigSettings[name];
+            config[name] = dataConfig[name];
           } else {
-            console.warn('[SkipTo]: Unsuported or deprecated configuration option "' + name + '".');
+            console.warn('[SkipTo]: Unsupported or deprecated configuration option in data-skipto attribute: ' + name);
           }
         }
+        return config;
+
       }
     };
 
@@ -2768,6 +2823,6 @@ $skipToId [role="menuitem"]:focus .label {
     window.addEventListener('load', function() {
       SkipTo.init(window.SkipToConfig);
     });
-  })();
-
-})();
+  })();
+
+})();
diff --git a/scripts/coverage-report.template b/scripts/coverage-report.template
index fcf2892fdb..d575bdc47c 100644
--- a/scripts/coverage-report.template
+++ b/scripts/coverage-report.template
@@ -9,6 +9,7 @@
   <script src="../../shared/js/examples.js"></script>
   <script src="../../shared/js/highlight.pack.js"></script>
   <script src="../../shared/js/app.js"></script>
+  <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   <style>
     .sr-only {position: absolute; top: -30em;}
     table.summary th { width: 12em; }
diff --git a/scripts/reference-tables.template b/scripts/reference-tables.template
index 8cf6d323f3..6e60f2b680 100644
--- a/scripts/reference-tables.template
+++ b/scripts/reference-tables.template
@@ -9,6 +9,7 @@
   <script src="../shared/js/examples.js"></script>
   <script src="../shared/js/highlight.pack.js"></script>
   <script src="../shared/js/app.js"></script>
+  <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../shared/js/skipto.js"></script>
 </head>
 <body>
   <main>