Update img formatting for html linter

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>

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>
 

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>

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.

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>

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.

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>

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>
 

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>

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>

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>.

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>

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.

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.

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>

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.

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>

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>

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.

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.

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.

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>.

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.

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>

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>

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.

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.

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>

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>

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>

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.

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.

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.

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>

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>

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.