From 7439d5a191e2cc9936d74e3696647f04fe4bf99d Mon Sep 17 00:00:00 2001
From: alflennik <alflennik@users.noreply.github.com>
Date: Thu, 30 Nov 2023 11:03:46 -0500
Subject: [PATCH] Update img formatting for html linter

---
 .../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 +-
 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                | 60 +++++++++----------
 .../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 +-
 .../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 +-
 89 files changed, 118 insertions(+), 118 deletions(-)

diff --git a/content/patterns/accordion/accordion-pattern.html b/content/patterns/accordion/accordion-pattern.html
index fc8e32104d..a141142e11 100644
--- a/content/patterns/accordion/accordion-pattern.html
+++ b/content/patterns/accordion/accordion-pattern.html
@@ -37,7 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-accordion.svg" />
+        <img alt="" src="../../images/pattern-accordion.svg">
         <h2>Example</h2>
         <p><a href="examples/accordion.html">Accordion Example</a>: demonstrates a form divided into three sections using an accordion to show one section at a time.</p>
       </section>
diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
index 2125565ecf..1596083509 100644
--- a/content/patterns/accordion/examples/accordion.html
+++ b/content/patterns/accordion/examples/accordion.html
@@ -28,7 +28,7 @@ <h1>Accordion Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-accordion.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-accordion.svg">
         <p>The below example section contains a simple personal information input form divided into 3 sections that demonstrates the <a href="../accordion-pattern.html">Accordion Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/alert/alert-pattern.html b/content/patterns/alert/alert-pattern.html
index 4f8de78aae..81318f72c1 100644
--- a/content/patterns/alert/alert-pattern.html
+++ b/content/patterns/alert/alert-pattern.html
@@ -38,7 +38,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-alert.svg" />
+        <img alt="" src="../../images/pattern-alert.svg">
         <h2>Example</h2>
         <p><a href="examples/alert.html">Alert Example</a></p>
       </section>
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
index e188c9c4fa..2f4d78b9cb 100644
--- a/content/patterns/alert/examples/alert.html
+++ b/content/patterns/alert/examples/alert.html
@@ -29,7 +29,7 @@ <h1>Alert Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alert.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alert.svg">
         <p>
           The below example demonstrates the <a href="../alert-pattern.html">Alert Pattern</a>.
           Activating the <q>Trigger Alert</q> button causes a message to be inserted into the example alert element.
diff --git a/content/patterns/alertdialog/alertdialog-pattern.html b/content/patterns/alertdialog/alertdialog-pattern.html
index d97fe40698..0db8f9fb31 100644
--- a/content/patterns/alertdialog/alertdialog-pattern.html
+++ b/content/patterns/alertdialog/alertdialog-pattern.html
@@ -26,7 +26,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-alertdialog.svg" />
+        <img alt="" src="../../images/pattern-alertdialog.svg">
         <h2>Example</h2>
         <p><a href="../alertdialog/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</p>
       </section>
diff --git a/content/patterns/alertdialog/examples/alertdialog.html b/content/patterns/alertdialog/examples/alertdialog.html
index c7a59ea08f..ea35560665 100644
--- a/content/patterns/alertdialog/examples/alertdialog.html
+++ b/content/patterns/alertdialog/examples/alertdialog.html
@@ -30,7 +30,7 @@ <h1>Alert Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alertdialog.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alertdialog.svg">
         <p>
           The below example of a confirmation prompt demonstrates the <a href="../alertdialog-pattern.html">Alert Dialog Pattern</a>.
           It also includes an example of the <a href="../../alert/alert-pattern.html">Alert Pattern</a> to make comparing the experiences provided by the two patterns easy.
diff --git a/content/patterns/breadcrumb/breadcrumb-pattern.html b/content/patterns/breadcrumb/breadcrumb-pattern.html
index 935dc270cc..61967ffd9a 100644
--- a/content/patterns/breadcrumb/breadcrumb-pattern.html
+++ b/content/patterns/breadcrumb/breadcrumb-pattern.html
@@ -26,7 +26,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-breadcrumb.svg" />
+        <img alt="" src="../../images/pattern-breadcrumb.svg">
         <h2>Example</h2>
         <p><a href="examples/breadcrumb.html">Breadcrumb design pattern example</a></p>
       </section>
diff --git a/content/patterns/breadcrumb/examples/breadcrumb.html b/content/patterns/breadcrumb/examples/breadcrumb.html
index a5270d23be..df73832aee 100644
--- a/content/patterns/breadcrumb/examples/breadcrumb.html
+++ b/content/patterns/breadcrumb/examples/breadcrumb.html
@@ -28,7 +28,7 @@ <h1>Breadcrumb Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-breadcrumb.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-breadcrumb.svg">
         <p>The following example demonstrates the <a href="../breadcrumb-pattern.html">Breadcrumb Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/button/button-pattern.html b/content/patterns/button/button-pattern.html
index a632ebece1..fdc991caca 100644
--- a/content/patterns/button/button-pattern.html
+++ b/content/patterns/button/button-pattern.html
@@ -47,7 +47,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-button.svg" />
+        <img alt="" src="../../images/pattern-button.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/button.html">Button Examples</a>: Examples of clickable HTML <code>div</code> and <code>span</code> elements made into accessible command and toggle buttons.</li>
diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
index a3ff460bbe..d3029aa99d 100644
--- a/content/patterns/button/examples/button.html
+++ b/content/patterns/button/examples/button.html
@@ -30,7 +30,7 @@ <h1>Button Examples</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg">
         <p>The following command and toggle button examples demonstrate the <a href="../button-pattern.html">Button Pattern</a>.</p>
         <p>Similar examples include:</p>
         <ul>
diff --git a/content/patterns/button/examples/button_idl.html b/content/patterns/button/examples/button_idl.html
index b620f8519e..f30e8ca801 100644
--- a/content/patterns/button/examples/button_idl.html
+++ b/content/patterns/button/examples/button_idl.html
@@ -30,7 +30,7 @@ <h1>Button Examples (IDL Version)</h1>
 
       <section>
         <h2>About This example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-button.svg">
         <p>The following examples of the <a href="../button-pattern.html">Button Pattern</a> demonstrate a new JavaScript syntax for coding ARIA attributes.</p>
         <p>
           The JavaScript for the example buttons on this page uses the <a class="specref" href="#idl-interface">IDL Interface defined in ARIA 1.2</a>.
diff --git a/content/patterns/carousel/carousel-pattern.html b/content/patterns/carousel/carousel-pattern.html
index d60e0da389..996c8e7257 100644
--- a/content/patterns/carousel/carousel-pattern.html
+++ b/content/patterns/carousel/carousel-pattern.html
@@ -54,7 +54,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-carousel.svg" />
+        <img alt="" src="../../images/pattern-carousel.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/carousel-1-prev-next.html">Auto-Rotating Image Carousel with Buttons for Slide Control:</a> A basic image carousel that demonstrates the accessibility features necessary for carousels that rotate automatically on page load and also enables users to choose which slide is displayed with buttons for previous and next slide.</li>
diff --git a/content/patterns/carousel/examples/carousel-1-prev-next.html b/content/patterns/carousel/examples/carousel-1-prev-next.html
index 957b52b759..8cfd8c53b8 100644
--- a/content/patterns/carousel/examples/carousel-1-prev-next.html
+++ b/content/patterns/carousel/examples/carousel-1-prev-next.html
@@ -29,7 +29,7 @@ <h1>Auto-Rotating Image Carousel Example with Buttons for Slide Control</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg">
         <p>
           The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           For instance, rotation stops when users either move focus into the carousel or hover the mouse over carousel content, and users can manually control which slide is displayed with previous and next slide buttons.
diff --git a/content/patterns/carousel/examples/carousel-2-tablist.html b/content/patterns/carousel/examples/carousel-2-tablist.html
index a9ea2b7b54..d3a734e9eb 100644
--- a/content/patterns/carousel/examples/carousel-2-tablist.html
+++ b/content/patterns/carousel/examples/carousel-2-tablist.html
@@ -29,7 +29,7 @@ <h1>Auto-Rotating Image Carousel with Tabs for Slide Control Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-carousel.svg">
         <p>
           The following example implementation of the <a href="../carousel-pattern.html">Carousel Pattern</a> demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads.
           This example also illustrates how to use the <a href="../../tabs/tabs-pattern.html">tabs pattern</a> to provide users with a way to skip slides in the sequence by directly choosing which one to view.
diff --git a/content/patterns/checkbox/checkbox-pattern.html b/content/patterns/checkbox/checkbox-pattern.html
index 7e7d51195f..e651646c46 100644
--- a/content/patterns/checkbox/checkbox-pattern.html
+++ b/content/patterns/checkbox/checkbox-pattern.html
@@ -40,7 +40,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-checkbox.svg" />
+        <img alt="" src="../../images/pattern-checkbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/checkbox.html">Checkbox (Two-State) Example</a>: Demonstrates a simple 2-state checkbox.</li>
diff --git a/content/patterns/checkbox/examples/checkbox-mixed.html b/content/patterns/checkbox/examples/checkbox-mixed.html
index 4e92bad857..bab132c42d 100644
--- a/content/patterns/checkbox/examples/checkbox-mixed.html
+++ b/content/patterns/checkbox/examples/checkbox-mixed.html
@@ -29,7 +29,7 @@ <h1>Checkbox Example (Mixed-State)</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg">
         <p>
           This example demonstrates using the <a href="../checkbox-pattern.html">Checkbox Pattern</a> to create a tri-state, or mixed-state, checkbox.
           In this implementation, the mixed-state checkbox represents the state of a set of standard HTML checkboxes.
diff --git a/content/patterns/checkbox/examples/checkbox.html b/content/patterns/checkbox/examples/checkbox.html
index 7cf8b24603..b473db021e 100644
--- a/content/patterns/checkbox/examples/checkbox.html
+++ b/content/patterns/checkbox/examples/checkbox.html
@@ -29,7 +29,7 @@ <h1>Checkbox Example (Two State)</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-checkbox.svg">
         <p>This example implements the <a href="../checkbox-pattern.html">Checkbox Pattern</a> for a two state checkbox using <code>div</code> elements.</p>
 
         <p>Similar examples include:</p>
diff --git a/content/patterns/combobox/combobox-pattern.html b/content/patterns/combobox/combobox-pattern.html
index 74b1619924..643e3320dc 100644
--- a/content/patterns/combobox/combobox-pattern.html
+++ b/content/patterns/combobox/combobox-pattern.html
@@ -100,7 +100,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-combobox.svg" />
+        <img alt="" src="../../images/pattern-combobox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/combobox-select-only.html">Select-Only Combobox</a>: A single-select combobox with no text input that is functionally similar to an HTML <code>select</code> element.</li>
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-both.html b/content/patterns/combobox/examples/combobox-autocomplete-both.html
index 912cec30e4..c4c1e8ce7f 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-both.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-both.html
@@ -29,7 +29,7 @@ <h1>Editable Combobox With Both List and Inline Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-list.html b/content/patterns/combobox/examples/combobox-autocomplete-list.html
index ca4a3220c0..c6ed9033b5 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-list.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-list.html
@@ -29,7 +29,7 @@ <h1>Editable Combobox With List Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox for choosing the name of a US state or territory demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-autocomplete-none.html b/content/patterns/combobox/examples/combobox-autocomplete-none.html
index dc58213f1b..a4a2df7350 100644
--- a/content/patterns/combobox/examples/combobox-autocomplete-none.html
+++ b/content/patterns/combobox/examples/combobox-autocomplete-none.html
@@ -29,7 +29,7 @@ <h1>Editable Combobox without Autocomplete Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below combobox that enables users to choose a term from a hypothetical list of previously searched terms demonstrates the <a href="../combobox-pattern.html">Combobox Pattern</a>.
           The design pattern describes four types of autocomplete behavior.
diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index 2cd61567af..f36df85ea9 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -30,7 +30,7 @@ <h1>Date Picker Combobox Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The below date picker demonstrates an implementation of the <a href="../combobox-pattern.html">Combobox Pattern</a> that opens a dialog.
           The date picker dialog is opened by activating the choose date button or by moving keyboard focus to the combobox and pressing <kbd>Down Arrow</kbd> or <kbd>Alt + Down Arrow</kbd>.
diff --git a/content/patterns/combobox/examples/combobox-select-only.html b/content/patterns/combobox/examples/combobox-select-only.html
index 8b675cad3a..4768c75a9e 100644
--- a/content/patterns/combobox/examples/combobox-select-only.html
+++ b/content/patterns/combobox/examples/combobox-select-only.html
@@ -29,7 +29,7 @@ <h1>Select-Only Combobox Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The following example implementation of the <a href="../combobox-pattern.html">Combobox Pattern</a> demonstrates a single-select combobox widget that is functionally similar to an HTML <code>select</code> element.
           Unlike the editable combobox examples, this select-only combobox is not made with an <code>&lt;input&gt;</code> element, and it does not accept freeform user input.
diff --git a/content/patterns/combobox/examples/grid-combo.html b/content/patterns/combobox/examples/grid-combo.html
index 58b71c2b6d..87a2b587f3 100644
--- a/content/patterns/combobox/examples/grid-combo.html
+++ b/content/patterns/combobox/examples/grid-combo.html
@@ -31,7 +31,7 @@ <h1>Editable Combobox with Grid Popup Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-combobox.svg">
         <p>
           The following example combobox implements the <a href="../combobox-pattern.html">combobox pattern</a> using a grid for the suggested values popup.
         </p>
diff --git a/content/patterns/dialog-modal/dialog-modal-pattern.html b/content/patterns/dialog-modal/dialog-modal-pattern.html
index a343ea01d5..68d8829ed6 100644
--- a/content/patterns/dialog-modal/dialog-modal-pattern.html
+++ b/content/patterns/dialog-modal/dialog-modal-pattern.html
@@ -36,7 +36,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-dialog-modal.svg" />
+        <img alt="" src="../../images/pattern-dialog-modal.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/dialog.html">Modal Dialog Example</a>: Demonstrates multiple layers of modal dialogs with both small and large amounts of content.</li>
diff --git a/content/patterns/dialog-modal/examples/datepicker-dialog.html b/content/patterns/dialog-modal/examples/datepicker-dialog.html
index b5df408bd2..486139bdad 100644
--- a/content/patterns/dialog-modal/examples/datepicker-dialog.html
+++ b/content/patterns/dialog-modal/examples/datepicker-dialog.html
@@ -30,7 +30,7 @@ <h1>Date Picker Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg">
         <p>
           The example below includes a date input field and a button that opens a date picker that implements the <a href="../dialog-modal-pattern.html">Dialog (Modal) Pattern</a>.
           The dialog contains a calendar that uses the <a href="../../grid/grid-pattern.html">grid pattern</a> to present buttons that enable the user to choose a day from the calendar.
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
index 2f7cba0b9a..7f9c38ba6d 100644
--- a/content/patterns/dialog-modal/examples/dialog.html
+++ b/content/patterns/dialog-modal/examples/dialog.html
@@ -30,7 +30,7 @@ <h1>Modal Dialog Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg">
         <p>
           Following is an example implementation of the <a href="../dialog-modal-pattern.html">Dialog (Modal) Pattern</a>.
           The below <q>Add Delivery Address</q> button opens a modal dialog that contains two buttons that open other dialogs.
diff --git a/content/patterns/disclosure/disclosure-pattern.html b/content/patterns/disclosure/disclosure-pattern.html
index d41806a8ba..5b20b6182d 100644
--- a/content/patterns/disclosure/disclosure-pattern.html
+++ b/content/patterns/disclosure/disclosure-pattern.html
@@ -27,7 +27,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-disclosure.svg" />
+        <img alt="" src="../../images/pattern-disclosure.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/disclosure-image-description.html">Disclosure (Show/Hide) of Image Description</a></li>
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
index bd60cdd0d5..138491d7c8 100644
--- a/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -29,7 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
         </p>
diff --git a/content/patterns/disclosure/examples/disclosure-image-description.html b/content/patterns/disclosure/examples/disclosure-image-description.html
index 99e02bdee1..76f7c835a5 100644
--- a/content/patterns/disclosure/examples/disclosure-image-description.html
+++ b/content/patterns/disclosure/examples/disclosure-image-description.html
@@ -29,7 +29,7 @@ <h1>Example Disclosure (Show/Hide) for Image Description</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to provide a way of revealing a table of data that complements an image.
         </p>
diff --git a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
index 92ec63326c..31390dbc87 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation-hybrid.html
@@ -38,7 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Unlike the other <a href="disclosure-navigation.html">disclosure navigation menu example</a>, this example includes top-level links alongside the disclosure buttons.
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
index b5589182ca..75d6c4405e 100644
--- a/content/patterns/disclosure/examples/disclosure-navigation.html
+++ b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -38,7 +38,7 @@ <h3>Important</h3>
             <a href="../../menubar/menu-and-menubar-pattern.html#keyboard_interaction">keyboard interactions specified by the menu and menubar pattern</a>.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
         <p>
           The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to show and hide dropdown lists of links in a navigation bar for a mythical university web site.
           Each disclosure button represents a section of the web site, and expanding it shows a list of links to pages within that section.
diff --git a/content/patterns/feed/examples/feed.html b/content/patterns/feed/examples/feed.html
index fced463dcb..17e7cde1df 100644
--- a/content/patterns/feed/examples/feed.html
+++ b/content/patterns/feed/examples/feed.html
@@ -25,7 +25,7 @@ <h1>Feed Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-feed.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-feed.svg">
         <p>
           <strong>NOTE:</strong> The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
           This page provides a proposed implementation of a feed component.
diff --git a/content/patterns/feed/feed-pattern.html b/content/patterns/feed/feed-pattern.html
index 8cd35c614a..eb2aec2ebc 100644
--- a/content/patterns/feed/feed-pattern.html
+++ b/content/patterns/feed/feed-pattern.html
@@ -62,7 +62,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-feed.svg" />
+        <img alt="" src="../../images/pattern-feed.svg">
         <h2>Example</h2>
         <p>
           <a href="examples/feed.html">Example Implementation of Feed Pattern</a>
diff --git a/content/patterns/grid/examples/advanced-data-grid.html b/content/patterns/grid/examples/advanced-data-grid.html
index 656334c78c..c5d5e9cbbf 100644
--- a/content/patterns/grid/examples/advanced-data-grid.html
+++ b/content/patterns/grid/examples/advanced-data-grid.html
@@ -34,7 +34,7 @@ <h1>Advanced Data Grid</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           This example has not yet been developed.
           Development is described in <a href="https://github.com/w3c/aria-practices/issues/155">issue 155.</a>
diff --git a/content/patterns/grid/examples/data-grids.html b/content/patterns/grid/examples/data-grids.html
index 34dd39ec5a..e7605b3b70 100644
--- a/content/patterns/grid/examples/data-grids.html
+++ b/content/patterns/grid/examples/data-grids.html
@@ -33,7 +33,7 @@ <h1>Data Grid Examples</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           Following are three example implementations of the <a href="../grid-pattern.html">Grid Pattern</a> that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information.
           Each of the following three grids presents a set of financial transactions.
diff --git a/content/patterns/grid/examples/layout-grids.html b/content/patterns/grid/examples/layout-grids.html
index ac26033577..2f8d4c8007 100644
--- a/content/patterns/grid/examples/layout-grids.html
+++ b/content/patterns/grid/examples/layout-grids.html
@@ -31,7 +31,7 @@ <h1>Layout Grid Examples</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-grid.svg">
         <p>
           The following examples demonstrate how the <a href="../grid-pattern.html">Grid Pattern</a> can be used to group a collection of interactive widgets into a single tab stop.
           In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys.
diff --git a/content/patterns/grid/grid-pattern.html b/content/patterns/grid/grid-pattern.html
index 05f3cba123..e03f6b969e 100644
--- a/content/patterns/grid/grid-pattern.html
+++ b/content/patterns/grid/grid-pattern.html
@@ -52,7 +52,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-grid.svg" />
+        <img alt="" src="../../images/pattern-grid.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/layout-grids.html">Layout Grid Examples</a>: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.</li>
diff --git a/content/patterns/landmarks/landmarks-pattern.html b/content/patterns/landmarks/landmarks-pattern.html
index 24cc273302..a8d16e7891 100644
--- a/content/patterns/landmarks/landmarks-pattern.html
+++ b/content/patterns/landmarks/landmarks-pattern.html
@@ -37,7 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-landmarks.svg" />
+        <img alt="" src="../../images/pattern-landmarks.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/main.html">Main Landmark Example</a></li>
diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
index 87b03af55e..b482ab957d 100644
--- a/content/patterns/link/examples/link.html
+++ b/content/patterns/link/examples/link.html
@@ -29,7 +29,7 @@ <h1>Link Examples</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-link.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-link.svg">
         <p>
           The examples below demonstrate three variations of the <a href="../link-pattern.html">Link Pattern</a>.
           The link pattern is used when it is necessary for elements other than the HTML <code>a</code> element to have link behaviors.
diff --git a/content/patterns/link/link-pattern.html b/content/patterns/link/link-pattern.html
index 733614f65a..0291fdb235 100644
--- a/content/patterns/link/link-pattern.html
+++ b/content/patterns/link/link-pattern.html
@@ -31,7 +31,7 @@ <h3>note</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-link.svg" />
+        <img alt="" src="../../images/pattern-link.svg">
         <h2>Examples</h2>
         <p><a href="examples/link.html">Link Examples</a>: Link widgets constructed from HTML <code>span</code> and <code>img</code> elements.</p>
       </section>
diff --git a/content/patterns/listbox/examples/listbox-collapsible.html b/content/patterns/listbox/examples/listbox-collapsible.html
index dbe8a1109b..8e0c52866a 100644
--- a/content/patterns/listbox/examples/listbox-collapsible.html
+++ b/content/patterns/listbox/examples/listbox-collapsible.html
@@ -37,7 +37,7 @@ <h3>Deprecation Warning</h3>
             The <a href="../../combobox/examples/combobox-select-only.html">select-only combobox</a> should be used as an alternative to this pattern.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML <code>select</code> input with the attribute <code>size="1"</code>.
           The widget consists of a button that triggers the display of a listbox.
diff --git a/content/patterns/listbox/examples/listbox-grouped.html b/content/patterns/listbox/examples/listbox-grouped.html
index d1b3f5abc8..7c5f7a382b 100644
--- a/content/patterns/listbox/examples/listbox-grouped.html
+++ b/content/patterns/listbox/examples/listbox-grouped.html
@@ -30,7 +30,7 @@ <h1>Listbox Example with Grouped Options</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a single-select listbox widget with grouped options.
           This widget is functionally similar to an HTML <code>select</code> element with <code>size</code> greater than 1 and options grouped into categories with labeled <code>optgroup</code> elements.
diff --git a/content/patterns/listbox/examples/listbox-rearrangeable.html b/content/patterns/listbox/examples/listbox-rearrangeable.html
index 3a437228e8..5e42f94967 100644
--- a/content/patterns/listbox/examples/listbox-rearrangeable.html
+++ b/content/patterns/listbox/examples/listbox-rearrangeable.html
@@ -31,7 +31,7 @@ <h1>Example Listboxes with Rearrangeable Options</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following two example implementations of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrate differences between single-select and multi-select functionality.
           In both examples, users can use action buttons to move options from one list to another.
diff --git a/content/patterns/listbox/examples/listbox-scrollable.html b/content/patterns/listbox/examples/listbox-scrollable.html
index ee1d66d432..4993432da1 100644
--- a/content/patterns/listbox/examples/listbox-scrollable.html
+++ b/content/patterns/listbox/examples/listbox-scrollable.html
@@ -30,7 +30,7 @@ <h1>Scrollable Listbox Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-listbox.svg">
         <p>
           The following example implementation of the <a href="../listbox-pattern.html">Listbox Pattern</a> demonstrates a scrollable single-select listbox widget.
           This widget is functionally similar to an HTML <code>select</code> input where the <code>size</code> attribute has a value greater than one.
diff --git a/content/patterns/listbox/listbox-pattern.html b/content/patterns/listbox/listbox-pattern.html
index 06baf8a9e1..477e3bac18 100644
--- a/content/patterns/listbox/listbox-pattern.html
+++ b/content/patterns/listbox/listbox-pattern.html
@@ -47,7 +47,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-listbox.svg" />
+        <img alt="" src="../../images/pattern-listbox.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/listbox-scrollable.html">Scrollable Listbox Example</a>: Single-select listbox that scrolls to reveal more options, similar to HTML <code>select</code> with <code>size</code> attribute greater than one.</li>
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 fdca02986d..3a3076574b 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
@@ -29,7 +29,7 @@ <h1>Actions Menu Button Example Using aria-activedescendant</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates how the <a href="../menu-button-pattern.html">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html
index 18fc15c0bd..fd60e040bd 100644
--- a/content/patterns/menu-button/examples/menu-button-actions.html
+++ b/content/patterns/menu-button/examples/menu-button-actions.html
@@ -29,7 +29,7 @@ <h1>Actions Menu Button Example Using <code>element.focus()</code></h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates how the <a href="../menu-button-pattern.html">Menu Button Pattern</a> can be used to create a button that opens an actions menu.
           In this example, choosing an action from the menu will cause the chosen action to be displayed in the <q>Last Action</q> edit box.
diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
index 8645763956..fe63617d81 100644
--- a/content/patterns/menu-button/examples/menu-button-links.html
+++ b/content/patterns/menu-button/examples/menu-button-links.html
@@ -29,7 +29,7 @@ <h1>Navigation Menu Button Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menu-button.svg">
         <p>
           This example demonstrates the <a href="../menu-button-pattern.html">Menu Button Pattern</a> for a button that displays a menu of link targets.
           The menu items are made from HTML links, so they maintain their HTML link behaviors.
diff --git a/content/patterns/menu-button/menu-button-pattern.html b/content/patterns/menu-button/menu-button-pattern.html
index c21dbf335c..96fb75e84e 100644
--- a/content/patterns/menu-button/menu-button-pattern.html
+++ b/content/patterns/menu-button/menu-button-pattern.html
@@ -25,7 +25,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-menu-button.svg" />
+        <img alt="" src="../../images/pattern-menu-button.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/menu-button-actions-active-descendant.html">Action Menu Button Example Using aria-activedescendant</a>: A button that opens a menu of actions or commands where focus in the menu is managed using aria-activedescendant.</li>
diff --git a/content/patterns/menubar/examples/menubar-editor.html b/content/patterns/menubar/examples/menubar-editor.html
index ad4ff49995..9366156c1f 100644
--- a/content/patterns/menubar/examples/menubar-editor.html
+++ b/content/patterns/menubar/examples/menubar-editor.html
@@ -30,7 +30,7 @@ <h1>Editor Menubar Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg">
         <p>
           The following example demonstrates using the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> to provide access to editing actions for a text area.
           Each item in the menubar identifies a category of text formatting actions that can be executed from its submenu.
diff --git a/content/patterns/menubar/examples/menubar-navigation.html b/content/patterns/menubar/examples/menubar-navigation.html
index 1f654952a9..07a741a9d7 100644
--- a/content/patterns/menubar/examples/menubar-navigation.html
+++ b/content/patterns/menubar/examples/menubar-navigation.html
@@ -40,7 +40,7 @@ <h3>Caution!</h3>
             </li>
           </ul>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-menubar.svg">
         <p>
           The following implementation of the <a href="../menu-and-menubar-pattern.html">Menubar Pattern</a> demonstrates how a menubar can provide navigation menus.
           The parent menu items in the menubar represent a section of a mythical university web site and open a submenu containing menu items that link to pages within that section.
diff --git a/content/patterns/menubar/menu-and-menubar-pattern.html b/content/patterns/menubar/menu-and-menubar-pattern.html
index 7148b0da7f..e55e358899 100644
--- a/content/patterns/menubar/menu-and-menubar-pattern.html
+++ b/content/patterns/menubar/menu-and-menubar-pattern.html
@@ -34,7 +34,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-menubar.svg" />
+        <img alt="" src="../../images/pattern-menubar.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/menubar-editor.html">Editor Menubar Example</a>: Demonstrates menu radios and menu checkboxes in submenus of a menubar that provides text formatting commands for a text field.</li>
diff --git a/content/patterns/meter/examples/meter.html b/content/patterns/meter/examples/meter.html
index 6ac05dfd5b..042e8c8334 100644
--- a/content/patterns/meter/examples/meter.html
+++ b/content/patterns/meter/examples/meter.html
@@ -30,7 +30,7 @@ <h1>Meter Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-meter.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-meter.svg">
         <p>The following example of a CPU meter demonstrates the <a href="../meter-pattern.html">Meter Pattern</a>.</p>
       </section>
 
diff --git a/content/patterns/meter/meter-pattern.html b/content/patterns/meter/meter-pattern.html
index 30a62d50a3..5c0b424e44 100644
--- a/content/patterns/meter/meter-pattern.html
+++ b/content/patterns/meter/meter-pattern.html
@@ -35,7 +35,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-meter.svg" />
+        <img alt="" src="../../images/pattern-meter.svg">
         <h2>Example</h2>
         <p><a href="examples/meter.html">Meter Example</a></p>
       </section>
diff --git a/content/patterns/patterns.html b/content/patterns/patterns.html
index bed163c633..f9d0ef45e9 100644
--- a/content/patterns/patterns.html
+++ b/content/patterns/patterns.html
@@ -19,7 +19,7 @@ <h1>Patterns</h1>
       <li class="tile">
         <a href="accordion/accordion-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-accordion.svg" />
+            <img alt="" src="../images/pattern-accordion.svg">
             <span>Accordion (Sections With Show/Hide Functionality)</span>
           </h2>
         </a>
@@ -31,7 +31,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="alert/alert-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-alert.svg" />
+            <img alt="" src="../images/pattern-alert.svg">
             <span>Alert</span>
           </h2>
         </a>
@@ -43,7 +43,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="alertdialog/alertdialog-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-alertdialog.svg" />
+            <img alt="" src="../images/pattern-alertdialog.svg">
             <span>Alert and Message Dialogs</span>
           </h2>
         </a>
@@ -55,7 +55,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="breadcrumb/breadcrumb-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-breadcrumb.svg" />
+            <img alt="" src="../images/pattern-breadcrumb.svg">
             <span>Breadcrumb</span>
           </h2>
         </a>
@@ -67,7 +67,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="button/button-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-button.svg" />
+            <img alt="" src="../images/pattern-button.svg">
             <span>Button</span>
           </h2>
         </a>
@@ -79,7 +79,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="carousel/carousel-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-carousel.svg" />
+            <img alt="" src="../images/pattern-carousel.svg">
             <span>Carousel (Slide Show or Image Rotator)</span>
           </h2>
         </a>
@@ -91,7 +91,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="checkbox/checkbox-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-checkbox.svg" />
+            <img alt="" src="../images/pattern-checkbox.svg">
             <span>Checkbox</span>
           </h2>
         </a>
@@ -103,7 +103,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="combobox/combobox-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-combobox.svg" />
+            <img alt="" src="../images/pattern-combobox.svg">
             <span>Combobox</span>
           </h2>
         </a>
@@ -115,7 +115,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="dialog-modal/dialog-modal-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-dialog-modal.svg" />
+            <img alt="" src="../images/pattern-dialog-modal.svg">
             <span>Dialog (Modal)</span>
           </h2>
         </a>
@@ -127,7 +127,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="disclosure/disclosure-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-disclosure.svg" />
+            <img alt="" src="../images/pattern-disclosure.svg">
             <span>Disclosure (Show/Hide)</span>
           </h2>
         </a>
@@ -139,7 +139,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="feed/feed-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-feed.svg" />
+            <img alt="" src="../images/pattern-feed.svg">
             <span>Feed</span>
           </h2>
         </a>
@@ -151,7 +151,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="grid/grid-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-grid.svg" />
+            <img alt="" src="../images/pattern-grid.svg">
             <span>Grid (Interactive Tabular Data and Layout Containers)</span>
           </h2>
         </a>
@@ -163,7 +163,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="landmarks/landmarks-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-landmarks.svg" />
+            <img alt="" src="../images/pattern-landmarks.svg">
             <span>Landmarks</span>
           </h2>
         </a>
@@ -175,7 +175,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="link/link-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-link.svg" />
+            <img alt="" src="../images/pattern-link.svg">
             <span>Link</span>
           </h2>
         </a>
@@ -187,7 +187,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="listbox/listbox-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-listbox.svg" />
+            <img alt="" src="../images/pattern-listbox.svg">
             <span>Listbox</span>
           </h2>
         </a>
@@ -199,7 +199,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="menubar/menu-and-menubar-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-menubar.svg" />
+            <img alt="" src="../images/pattern-menubar.svg">
             <span>Menu and Menubar</span>
           </h2>
         </a>
@@ -211,7 +211,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="menu-button/menu-button-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-menu-button.svg" />
+            <img alt="" src="../images/pattern-menu-button.svg">
             <span>Menu Button</span>
           </h2>
         </a>
@@ -223,7 +223,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="meter/meter-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-meter.svg" />
+            <img alt="" src="../images/pattern-meter.svg">
             <span>Meter</span>
           </h2>
         </a>
@@ -235,7 +235,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="radio/radio-group-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-radio.svg" />
+            <img alt="" src="../images/pattern-radio.svg">
             <span>Radio Group</span>
           </h2>
         </a>
@@ -247,7 +247,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="slider/slider-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-slider.svg" />
+            <img alt="" src="../images/pattern-slider.svg">
             <span>Slider</span>
           </h2>
         </a>
@@ -259,7 +259,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="slider-multithumb/slider-multithumb-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-slider-multithumb.svg" />
+            <img alt="" src="../images/pattern-slider-multithumb.svg">
             <span>Slider (Multi-Thumb)</span>
           </h2>
         </a>
@@ -271,7 +271,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="spinbutton/spinbutton-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-spinbutton.svg" />
+            <img alt="" src="../images/pattern-spinbutton.svg">
             <span>Spinbutton</span>
           </h2>
         </a>
@@ -283,7 +283,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="switch/switch-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-switch.svg" />
+            <img alt="" src="../images/pattern-switch.svg">
             <span>Switch</span>
           </h2>
         </a>
@@ -295,7 +295,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="table/table-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-table.svg" />
+            <img alt="" src="../images/pattern-table.svg">
             <span>Table</span>
           </h2>
         </a>
@@ -307,7 +307,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="tabs/tabs-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-tabs.svg" />
+            <img alt="" src="../images/pattern-tabs.svg">
             <span>Tabs</span>
           </h2>
         </a>
@@ -319,7 +319,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="toolbar/toolbar-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-toolbar.svg" />
+            <img alt="" src="../images/pattern-toolbar.svg">
             <span>Toolbar</span>
           </h2>
         </a>
@@ -331,7 +331,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="tooltip/tooltip-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-tooltip.svg" />
+            <img alt="" src="../images/pattern-tooltip.svg">
             <span>Tooltip</span>
           </h2>
         </a>
@@ -343,7 +343,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="treeview/treeview-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-treeview.svg" />
+            <img alt="" src="../images/pattern-treeview.svg">
             <span>Tree View</span>
           </h2>
         </a>
@@ -355,7 +355,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="treegrid/treegrid-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-treegrid.svg" />
+            <img alt="" src="../images/pattern-treegrid.svg">
             <span>Treegrid</span>
           </h2>
         </a>
@@ -367,7 +367,7 @@ <h2 class="tile-name">
       <li class="tile">
         <a href="windowsplitter/windowsplitter-pattern.html">
           <h2 class="tile-name">
-            <img alt="" src="../images/pattern-windowsplitter.svg" />
+            <img alt="" src="../images/pattern-windowsplitter.svg">
             <span>Window Splitter</span>
           </h2>
         </a>
diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
index 500d144685..24d432496a 100644
--- a/content/patterns/radio/examples/radio-activedescendant.html
+++ b/content/patterns/radio/examples/radio-activedescendant.html
@@ -29,7 +29,7 @@ <h1>Radio Group Example Using aria-activedescendant</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           This example implements the features of the <a href="../radio-group-pattern.html">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses <code>aria-activedescendant</code> for informing assistive technologies which radio button has visual focus.
diff --git a/content/patterns/radio/examples/radio-rating.html b/content/patterns/radio/examples/radio-rating.html
index 9337226500..6be2fc6161 100644
--- a/content/patterns/radio/examples/radio-rating.html
+++ b/content/patterns/radio/examples/radio-rating.html
@@ -29,7 +29,7 @@ <h1>Rating Radio Group Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           Following is an example of a rating input that demonstrates the <a href="../radio-group-pattern.html">Radio Group Pattern.</a>
           The rating is indicated by the number of stars selected by the user.
diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html
index 8251dbccc6..1026baf80c 100644
--- a/content/patterns/radio/examples/radio.html
+++ b/content/patterns/radio/examples/radio.html
@@ -29,7 +29,7 @@ <h1>Radio Group Example Using Roving tabindex</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
         <p>
           This example implements the features of the <a href="../radio-group-pattern.html">Radio Group Pattern</a> for two radio groups -- one for choosing a pizza crust and another for choosing a delivery method.
           This implementation uses a roving tabindex for managing focus within the radio group.
diff --git a/content/patterns/radio/radio-group-pattern.html b/content/patterns/radio/radio-group-pattern.html
index 4a635260f4..e29917ec9d 100644
--- a/content/patterns/radio/radio-group-pattern.html
+++ b/content/patterns/radio/radio-group-pattern.html
@@ -25,7 +25,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-radio.svg" />
+        <img alt="" src="../../images/pattern-radio.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/radio.html">Radio Group Example Using Roving tabindex</a></li>
diff --git a/content/patterns/slider-multithumb/examples/slider-multithumb.html b/content/patterns/slider-multithumb/examples/slider-multithumb.html
index 4b34350cf9..2a24a2bd2a 100644
--- a/content/patterns/slider-multithumb/examples/slider-multithumb.html
+++ b/content/patterns/slider-multithumb/examples/slider-multithumb.html
@@ -38,7 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider-multithumb.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider-multithumb.svg">
         <p>
           The following example of the <a href="../slider-multithumb-pattern.html">Multi-Thumb Slider Pattern</a> demonstrates an input for setting a pair of values that represent a range.
           This example enables users to specify a price range for a hotel reservation by moving the two arrows (thumbs) that represent the minimum and maximum price.
diff --git a/content/patterns/slider-multithumb/slider-multithumb-pattern.html b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
index fe319b2376..c9cd78d5ff 100644
--- a/content/patterns/slider-multithumb/slider-multithumb-pattern.html
+++ b/content/patterns/slider-multithumb/slider-multithumb-pattern.html
@@ -39,7 +39,7 @@ <h3>Warning</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-slider-multithumb.svg" />
+        <img alt="" src="../../images/pattern-slider-multithumb.svg">
         <h2>Example</h2>
         <p><a href="examples/slider-multithumb.html">Horizontal Multi-Thumb Slider Example</a>: Demonstrates a two-thumb slider for picking a price range for a hotel reservation.</p>
       </section>
diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
index 70979ac188..867dd0c16d 100644
--- a/content/patterns/slider/examples/slider-color-viewer.html
+++ b/content/patterns/slider/examples/slider-color-viewer.html
@@ -38,7 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           Following is an example of a color viewer that demonstrates the <a href="../slider-pattern.html">Slider Pattern</a>.
           Change the background of the color view box by adjusting the sliders for red, green, and blue values.
diff --git a/content/patterns/slider/examples/slider-rating.html b/content/patterns/slider/examples/slider-rating.html
index 2d7ecdd947..e6eeb74a66 100644
--- a/content/patterns/slider/examples/slider-rating.html
+++ b/content/patterns/slider/examples/slider-rating.html
@@ -38,7 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           Following is an example of a rating input that demonstrates the <a href="../slider-pattern.html">Slider Pattern</a>.
           This rating widget employs a slider because the slider pattern supports step values of any size.
diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html
index 115b59571f..91f61c5082 100644
--- a/content/patterns/slider/examples/slider-seek.html
+++ b/content/patterns/slider/examples/slider-seek.html
@@ -38,7 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           The following example of the <a href="../slider-pattern.html">Slider Pattern</a> illustrates a seek control that could be used to move the current play position in an audio or video media player.
           The example demonstrates how to use <code>aria-valuetext</code> to provide assistive technology users with meaningful names for numeric values.
diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html
index 3c4f2243c5..2d8c79ad15 100644
--- a/content/patterns/slider/examples/slider-temperature.html
+++ b/content/patterns/slider/examples/slider-temperature.html
@@ -38,7 +38,7 @@ <h3>Warning!</h3>
             Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
           </p>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
         <p>
           The following example is a vertically oriented temperature control that implements the <a href="../slider-pattern.html">Slider Pattern</a>.
           The slider illustrates use of <code>aria-orientation</code> to specify vertical orientation and use of <code>aria-valuetext</code> to convey unit of measure for numeric values to assistive technology users by appending <q>degrees Celsius</q> to the current value.
diff --git a/content/patterns/slider/slider-pattern.html b/content/patterns/slider/slider-pattern.html
index 3b661b3d5b..c8cc0d5ddd 100644
--- a/content/patterns/slider/slider-pattern.html
+++ b/content/patterns/slider/slider-pattern.html
@@ -34,7 +34,7 @@ <h3>Warning</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-slider.svg" />
+        <img alt="" src="../../images/pattern-slider.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/slider-color-viewer.html">Color Viewer Slider Example</a>: Basic horizontal sliders that illustrate setting numeric values for a color picker.</li>
diff --git a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
index ce15a3bfd5..85b7a30218 100644
--- a/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
+++ b/content/patterns/spinbutton/examples/datepicker-spinbuttons.html
@@ -31,7 +31,7 @@ <h1>Date Picker Spin Button Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-spinbutton.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-spinbutton.svg">
         <p>
           The following example uses the <a href="../spinbutton-pattern.html">Spin Button Pattern</a> to implement a date picker.
           It includes three spin buttons: one for setting the day, a second for month, and a third for year.
diff --git a/content/patterns/spinbutton/spinbutton-pattern.html b/content/patterns/spinbutton/spinbutton-pattern.html
index c18424f221..4cdc382a15 100644
--- a/content/patterns/spinbutton/spinbutton-pattern.html
+++ b/content/patterns/spinbutton/spinbutton-pattern.html
@@ -34,7 +34,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-spinbutton.svg" />
+        <img alt="" src="../../images/pattern-spinbutton.svg">
         <h2>Example</h2>
         <p><a href="examples/datepicker-spinbuttons.html">Date Picker Spin Button Example:</a> Illustrates a date picker made from three spin buttons for day, month, and year.</p>
       </section>
diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html
index 87c54631f7..9c21b13302 100644
--- a/content/patterns/switch/examples/switch-button.html
+++ b/content/patterns/switch/examples/switch-button.html
@@ -29,7 +29,7 @@ <h1>Switch Example Using HTML Button</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementing the <a href="../switch-pattern.html">Switch Pattern</a> with an HTML <code>button</code> as a switch element and using an <code>SVG</code> element to provide graphical rendering of switch states.
           It also demonstrates using the <code>group</code> role to present multiple switches in a labeled group.
diff --git a/content/patterns/switch/examples/switch-checkbox.html b/content/patterns/switch/examples/switch-checkbox.html
index c8cd9a7765..fded8231c6 100644
--- a/content/patterns/switch/examples/switch-checkbox.html
+++ b/content/patterns/switch/examples/switch-checkbox.html
@@ -29,7 +29,7 @@ <h1>Switch Example Using HTML Checkbox Input</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementing the <a href="../switch-pattern.html">Switch Pattern</a> with an HTML <code>input[type="checkbox"]</code> as the switch element and using CSS borders to provide graphical rendering of switch states.
           It also demonstrates using the HTML <code>fieldset</code> and <code>legend</code> elements to present multiple switches in a labeled group.
diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html
index 76e42a2267..bf8aa0301e 100644
--- a/content/patterns/switch/examples/switch.html
+++ b/content/patterns/switch/examples/switch.html
@@ -29,7 +29,7 @@ <h1>Switch Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-switch.svg">
         <p>
           This example illustrates implementation of the <a href="../switch-pattern.html">Switch Pattern</a> for a notification preferences control.
           It uses a <code>div</code> element for the switch and CSS borders to provide graphical rendering of switch states.
diff --git a/content/patterns/switch/switch-pattern.html b/content/patterns/switch/switch-pattern.html
index 933b2315e0..af02a1ce91 100644
--- a/content/patterns/switch/switch-pattern.html
+++ b/content/patterns/switch/switch-pattern.html
@@ -37,7 +37,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-switch.svg" />
+        <img alt="" src="../../images/pattern-switch.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/switch.html">Switch Example</a>: A switch based on a <code>div</code> element that turns a notification preference on and off.</li>
diff --git a/content/patterns/table/examples/sortable-table.html b/content/patterns/table/examples/sortable-table.html
index fe896b331c..53a88fde61 100644
--- a/content/patterns/table/examples/sortable-table.html
+++ b/content/patterns/table/examples/sortable-table.html
@@ -29,7 +29,7 @@ <h1>Sortable Table Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg">
         <p>
           The example below illustrates an implementation of the <a href="../table-pattern.html">Table Pattern</a> for a table with sortable rows.
           The example uses HTML table markup for all elements of the table structure, e.g., cells, rows, column headers, and caption.
diff --git a/content/patterns/table/examples/table.html b/content/patterns/table/examples/table.html
index 49144195e7..f717330760 100644
--- a/content/patterns/table/examples/table.html
+++ b/content/patterns/table/examples/table.html
@@ -28,7 +28,7 @@ <h1>Table Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-table.svg">
         <p>
           The below example illustrates an implementation of the WAI-ARIA <a href="../table-pattern.html">Table Pattern.</a>
           Note that when possible, using a native HTML <code>table</code> element is recommended.
diff --git a/content/patterns/table/table-pattern.html b/content/patterns/table/table-pattern.html
index b9cc6a7f1c..1dbed1c9a0 100644
--- a/content/patterns/table/table-pattern.html
+++ b/content/patterns/table/table-pattern.html
@@ -37,7 +37,7 @@ <h3>Note</h3>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-table.svg" />
+        <img alt="" src="../../images/pattern-table.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/table.html">Table Example</a>: ARIA table made using HTML <code>div</code> and <code>span</code> elements.</li>
diff --git a/content/patterns/tabs/examples/tabs-automatic.html b/content/patterns/tabs/examples/tabs-automatic.html
index b6370e108b..96caf79edc 100644
--- a/content/patterns/tabs/examples/tabs-automatic.html
+++ b/content/patterns/tabs/examples/tabs-automatic.html
@@ -29,7 +29,7 @@ <h1>Example of Tabs with Automatic Activation</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg">
         <p>
           This example section demonstrates a tabs widget that implements the <a href="../tabs-pattern.html">Tabs Pattern</a>.
           In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus.
diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html
index cae5213c15..e87d56654e 100644
--- a/content/patterns/tabs/examples/tabs-manual.html
+++ b/content/patterns/tabs/examples/tabs-manual.html
@@ -29,7 +29,7 @@ <h1>Example of Tabs with Manual Activation</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg">
         <p>
           The below example section demonstrates a tabs widget that implements the <a href="../tabs-pattern.html">Tabs Pattern</a>.
           In this example, a panel is displayed when users activate its tab with either <kbd>Space</kbd>, <kbd>Enter</kbd>, or a mouse click.
diff --git a/content/patterns/tabs/tabs-pattern.html b/content/patterns/tabs/tabs-pattern.html
index a0a408869b..150a87419e 100644
--- a/content/patterns/tabs/tabs-pattern.html
+++ b/content/patterns/tabs/tabs-pattern.html
@@ -41,7 +41,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-tabs.svg" />
+        <img alt="" src="../../images/pattern-tabs.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/tabs-automatic.html">Tabs With Automatic Activation</a>: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.</li>
diff --git a/content/patterns/toolbar/examples/toolbar.html b/content/patterns/toolbar/examples/toolbar.html
index 48fd776040..611c2091a3 100644
--- a/content/patterns/toolbar/examples/toolbar.html
+++ b/content/patterns/toolbar/examples/toolbar.html
@@ -36,7 +36,7 @@ <h1>Toolbar Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-toolbar.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-toolbar.svg">
         <p>
           The following example of an editor toolbar implements the <a href="../toolbar-pattern.html">Toolbar Pattern</a> and demonstrates how a toolbar can group a set of interactive widgets into a single tab stop.
           For illustrative and interoperability assessment purposes, this implementation includes a diverse set of widgets, some of which may not be ordinarily grouped in the same toolbar.
diff --git a/content/patterns/toolbar/toolbar-pattern.html b/content/patterns/toolbar/toolbar-pattern.html
index d01b9bea18..fe90633b3f 100644
--- a/content/patterns/toolbar/toolbar-pattern.html
+++ b/content/patterns/toolbar/toolbar-pattern.html
@@ -49,7 +49,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-toolbar.svg" />
+        <img alt="" src="../../images/pattern-toolbar.svg">
         <h2>Example</h2>
         <p><a href="examples/toolbar.html">Toolbar Example</a>: A toolbar that uses roving tabindex to manage focus and contains several types of controls, including toggle buttons, radio buttons, a menu button, a spin button, a checkbox, and a link.</p>
       </section>
diff --git a/content/patterns/tooltip/tooltip-pattern.html b/content/patterns/tooltip/tooltip-pattern.html
index 222a9c3604..8765296b9e 100644
--- a/content/patterns/tooltip/tooltip-pattern.html
+++ b/content/patterns/tooltip/tooltip-pattern.html
@@ -33,7 +33,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-tooltip.svg" />
+        <img alt="" src="../../images/pattern-tooltip.svg">
         <h2>Example</h2>
         <p>Work to develop a tooltip example is tracked by <a href="https://github.com/w3c/aria-practices/issues/127">issue 127.</a></p>
       </section>
diff --git a/content/patterns/treegrid/examples/treegrid-1.html b/content/patterns/treegrid/examples/treegrid-1.html
index 37f2327780..8a4646e701 100644
--- a/content/patterns/treegrid/examples/treegrid-1.html
+++ b/content/patterns/treegrid/examples/treegrid-1.html
@@ -50,7 +50,7 @@ <h1>Treegrid Email Inbox Example</h1>
 
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treegrid.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treegrid.svg">
         <p>The following example demonstrates how the <a href="../treegrid-pattern.html">Treegrid Pattern</a> can be used to make an interactive tree that enables users to both navigate the hierarchical structure of email conversations and also navigate elements that describe each email, such as subject and sender.</p>
         <p>Similar examples include:</p>
         <ul>
diff --git a/content/patterns/treegrid/treegrid-pattern.html b/content/patterns/treegrid/treegrid-pattern.html
index c8d7e9bae5..1bf4f0c416 100644
--- a/content/patterns/treegrid/treegrid-pattern.html
+++ b/content/patterns/treegrid/treegrid-pattern.html
@@ -42,7 +42,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-treegrid.svg" />
+        <img alt="" src="../../images/pattern-treegrid.svg">
         <h2>Example</h2>
         <p><a href="examples/treegrid-1.html">E-mail Inbox <code>treegrid</code> Example</a>: A treegrid for navigating an e-mail inbox that demonstrates three keyboard navigation models -- rows first, cells first, and cells only.</p>
       </section>
diff --git a/content/patterns/treeview/examples/treeview-1a.html b/content/patterns/treeview/examples/treeview-1a.html
index d61c226b8d..0372b614e8 100644
--- a/content/patterns/treeview/examples/treeview-1a.html
+++ b/content/patterns/treeview/examples/treeview-1a.html
@@ -32,7 +32,7 @@
       <h1>File Directory Treeview Example Using Computed Properties</h1>
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The following example implementation of the <a href="../treeview-pattern.html">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
diff --git a/content/patterns/treeview/examples/treeview-1b.html b/content/patterns/treeview/examples/treeview-1b.html
index 72ada2f467..907d358309 100644
--- a/content/patterns/treeview/examples/treeview-1b.html
+++ b/content/patterns/treeview/examples/treeview-1b.html
@@ -32,7 +32,7 @@
       <h1>File Directory Treeview Example Using Declared Properties</h1>
       <section>
         <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The following example implementation of the <a href="../treeview-pattern.html">Tree View Pattern</a> simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer.
           In the <q>My Documents</q> tree, each parent node represents a folder and each end node represents a file.
diff --git a/content/patterns/treeview/examples/treeview-navigation.html b/content/patterns/treeview/examples/treeview-navigation.html
index 70bcc08247..fe61eff568 100644
--- a/content/patterns/treeview/examples/treeview-navigation.html
+++ b/content/patterns/treeview/examples/treeview-navigation.html
@@ -37,7 +37,7 @@ <h3>Caution!</h3>
             <li>A pattern more suited for typical site navigation with expandable groups of links is the <a href="../../disclosure/disclosure-pattern.html">disclosure pattern.</a></li>
           </ul>
         </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg" />
+        <img alt="" class="example-page-example-icon" src="../../../images/pattern-treeview.svg">
         <p>
           The below example demonstrates how the <a href="../treeview-pattern.html">Tree View Pattern</a> can be used to build a navigation tree for a set of hierarchically organized web pages.
           It illustrates navigation of a mythical university web site that is comparable to the navigation illustrated in the
diff --git a/content/patterns/treeview/treeview-pattern.html b/content/patterns/treeview/treeview-pattern.html
index dda77b0900..328de9e603 100644
--- a/content/patterns/treeview/treeview-pattern.html
+++ b/content/patterns/treeview/treeview-pattern.html
@@ -36,7 +36,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-treeview.svg" />
+        <img alt="" src="../../images/pattern-treeview.svg">
         <h2>Examples</h2>
         <ul>
           <li><a href="examples/treeview-1a.html">File Directory Treeview Example Using Computed Properties</a>: A file selector tree that demonstrates browser support for automatically computing <code>aria-level</code>, <code>aria-posinset</code> and <code>aria-setsize</code> based on DOM structure.</li>
diff --git a/content/patterns/windowsplitter/windowsplitter-pattern.html b/content/patterns/windowsplitter/windowsplitter-pattern.html
index 4c3e7d6513..00e6239df3 100644
--- a/content/patterns/windowsplitter/windowsplitter-pattern.html
+++ b/content/patterns/windowsplitter/windowsplitter-pattern.html
@@ -42,7 +42,7 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="example">
-        <img alt="" src="../../images/pattern-windowsplitter.svg" />
+        <img alt="" src="../../images/pattern-windowsplitter.svg">
         <h2>Example</h2>
         <p>Work to develop an example window splitter widget is tracked by <a href="https://github.com/w3c/aria-practices/issues/130">issue 130.</a></p>
       </section>