Code guide: Use short encoding declaration and avoid /> (#2069)

* Use short encoding declaration and avoid />. Don't include a trailing slash in self-closing elements—the HTML standard says they're optional. * Use htmlhint 'empty-tag-not-self-closed' rule. This rule checks that HTML void elements do not use '/>' syntax. Co-authored-by: Michael "Z" Goddard <[email protected]> Co-authored-by: Howard Edwards <[email protected]>
w3c · Nov 23, 2021 · 858e6ab · 858e6ab
1 parent 2dfecb0
commit 858e6ab
Show file tree

Hide file tree

Showing 78 changed files with 267 additions and 267 deletions.
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -7,6 +7,7 @@
   "attr-value-not-empty": false,
   "doctype-first": true,
   "doctype-html5": true,
+  "empty-tag-not-self-closed": true,
   "head-script-disabled": false,
   "href-abs-or-rel": false,
   "id-class-ad-disabled": false,

diff --git a/aria-practices-DeletedSectionsArchive.html b/aria-practices-DeletedSectionsArchive.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
+<html lang="en-US">
 <head>
   <title>Content Deleted From WAI-ARIA Authoring Practices 1.1</title>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
   <script src="common/script/resolveReferences.js" class="remove"></script>
   <script src="common/biblio.js" class="remove"></script>
@@ -166,7 +166,7 @@
       preProcess: [linkCrossReferences],
     };
   </script>
-  <link href="common/css/common.css" rel="stylesheet" type="text/css" />
+  <link href="common/css/common.css" rel="stylesheet">
 </head>
 <body>
     <section id="abstract">
@@ -2837,7 +2837,7 @@ <h3> The Problem</h3>
         behavior of the element. The user agent's default behavior at the
         document element forms the controller. </p>
       <figure id="fig1">
-        <img alt="Accessibility information mapped to a DOM element in the Document Object Model" height="512" longdesc="#desc_fig1" src="img/accessibleelement.png" width="640"/>
+        <img alt="Accessibility information mapped to a DOM element in the Document Object Model" height="512" longdesc="#desc_fig1" src="img/accessibleelement.png" width="640">
         <figcaption>Accessibility Interoperability at a <abbr title="document object model">DOM</abbr> Node without JavaScript</figcaption>
       </figure>
       <p id="desc_fig1">The box between the DOM node
@@ -2850,7 +2850,7 @@ <h3> The Problem</h3>
         information, and relations). For HTML and other W3C markup, the
         accessibility information provided solely depends upon what the element's tag name and any accessibility attributes that map to that tag provides. For  example, the accessible role of a table is <code>table</code>. The author provides  an accessible description by assigning a <code>title</code> attribute.</p>
       <p>In contrast, with JavaScript, user actions can trigger updates in the data and presentation, but the default accessibility information available in the element tags is no longer valid.</p>
-      <figure id="fig2"><img alt="DOM Element with JavaScript controller" height="502" longdesc="#desc_fig2" src="img/accessibleJSelement.png" width="476"/>
+      <figure id="fig2"><img alt="DOM Element with JavaScript controller" height="502" longdesc="#desc_fig2" src="img/accessibleJSelement.png" width="476">
         <figcaption>Accessibility
         Interoperability at a DOM Node with JavaScript</figcaption></figure>
       <p id="desc_fig2"> <a href="#fig2"></a> shows the same DOM node provided
@@ -3308,7 +3308,7 @@ <h3> Use of XHTML Role Landmarks to Improve Document Navigation</h3>
       user to view a list of navigation landmarks.
       This tool, shown in <a href="#fig3"></a>, lists the  navigation sections on the page. Keyboard navigation of the list of navigation bars causes the
       corresponding document section to be highlighted. The title for each navigation region displays in the list.</p>
-      <figure id="fig3"><img alt="Table of Contents from Landmarks" height="813" longdesc="#desc_fig3" src="img/navlandmark.jpg" title="Table of Contents from Landmarks" width="877"/>
+      <figure id="fig3"><img alt="Table of Contents from Landmarks" height="813" longdesc="#desc_fig3" src="img/navlandmark.jpg" title="Table of Contents from Landmarks" width="877">
       <figcaption>Table of Contents generated from navigation landmarks in the header</figcaption>
       </figure>
     <p id="desc_fig3"> <a href="#fig3"></a> shows the <a href="http://firefox.cita.uiuc.edu/">accessibility
@@ -3332,7 +3332,7 @@ <h3> WAI-ARIA Role Taxonomy  - Extensible Semantic Role Model, using RDF/OWL</h3
       W3C standards-based approach to represent this information.</p>
       <figure id="fig4">
       <!-- <embed src="resourcemap.svg" width="810" height="800"> -->
-      <img alt="Sample Semantic Map for Taxonomy" height="564" longdesc="#desc_fig4" src="img/taxonomy.png" title="Sample Semantic Map for Taxonomy" width="500"/>
+      <img alt="Sample Semantic Map for Taxonomy" height="564" longdesc="#desc_fig4" src="img/taxonomy.png" title="Sample Semantic Map for Taxonomy" width="500">
       <figcaption>Example, Partial RDF Map for a possible ButtonUndo role as an extended role to  WAI-ARIA</figcaption>
       </figure>
     <p id="desc_fig4"> <a href="#fig4"></a> shows a basic RDF mapping that
@@ -3372,7 +3372,7 @@ <h4> Interoperability  Example: Grid Role </h4>
         The user uses arrow keys to navigates the data grid and among the page tabs.
         Using the Tab key, a user navigates between the notebook tab, the edit fields, buttons, and
         the data grid.</p>
-        <figure id="fig5"><img alt="DHTML example of GUI-like notebook tab with a data grid" height="633" longdesc="#desc_fig5" src="img/DHTMLexample.png" title="DHTML Example" width="844"/>
+        <figure id="fig5"><img alt="DHTML example of GUI-like notebook tab with a data grid" height="633" longdesc="#desc_fig5" src="img/DHTMLexample.png" title="DHTML Example" width="844">
         <figcaption>DHTML Example</figcaption>
         </figure>
       <p id="desc_fig5"> Accessible role and state
@@ -3383,7 +3383,7 @@ <h4> Interoperability  Example: Grid Role </h4>
         the Microsoft Active Accessibility rendering of the new
         accessibility markup provided on the DataGrid page tab which has
         focus.</p>
-        <figure id="fig6"><img alt="MSAA Inspect Tool diagnostics for Notebook page tab" height="647" longdesc="#desc_fig6" src="img/inspectofpagetab.png" title="MSAA Inspect Tool diagnostics for Notebook page tab" width="490"/>
+        <figure id="fig6"><img alt="MSAA Inspect Tool diagnostics for Notebook page tab" height="647" longdesc="#desc_fig6" src="img/inspectofpagetab.png" title="MSAA Inspect Tool diagnostics for Notebook page tab" width="490">
         <figcaption>Microsoft Inspect Tool rendering of the page tab
         DataGrid</figcaption>
         </figure>
@@ -3502,7 +3502,7 @@ <h3>Building Accessible Applications with <abbr title="Accessible Rich Internet
   </ol>
     <section id="exampletree">
     <h3>Example: Building a Tree Widget</h3>
-    <img alt="Graphic of an example tree view." class="role-screenshot" src="img/exampletree.png" width="188" height="327" />
+    <img alt="Graphic of an example tree view." class="role-screenshot" src="img/exampletree.png" width="188" height="327">
     <p>A basic tree view allows the user to select different list items and expand and collapse embedded lists. Arrow keys are used to navigate through a tree, including left/right to collapse/expand sub trees. Clicking the visible expander button with the mouse also toggles expansion. Further keyboard implementation details for tree widgets may found in the <a href="#aria_ex"></a>.</p>
     <p>To make this feature accessible we need to:</p>
     <ul>
@@ -3639,7 +3639,7 @@ <h3> Technical Benefits </h3>
     <p>WAI-ARIA and WCAG 2.0 coding techniques are useful for developing content and applications that can scale across a variety of user agents, including those on mobile devices. </p>
     <p>For all these reasons, adopting WAI-ARIA makes good technical as well as business sense. For a further illustration, compare how accessibility is achieved with WCAG techniques without and with WAI-ARIA, as shown in <a href="#fig7"></a>. </p>
       <figure id="fig7">
-        <!--<img alt="WAI-ARIA tree widget usability comparison" class="figure" src="img/style_aria.jpg" title="tree widget comparison"/>-->
+        <!--<img alt="WAI-ARIA tree widget usability comparison" class="figure" src="img/style_aria.jpg" title="tree widget comparison">-->
         <p class="ednote">Editor's Note: Figure 7, described as WAI-ARIA tree widget usability comparison, refers to a resource that has not yet been found.</p>
         <figcaption>Usability of Tree Widget Using WAI-ARIA Semantics to Implement WCAG 2.0 Guidelines Compared to WCAG 1.0 Without WAI-ARIA</figcaption>
       </figure>

diff --git a/aria-practices.html b/aria-practices.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
+<html lang="en-US">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>WAI-ARIA Authoring Practices 1.2</title>
   <script src="common/script/resolveReferences.js" class="remove"></script>
   <script src="respec-config.js" class="remove"></script>
   <script src="common/biblio.js" class="remove"></script>
   <script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
-  <link href="common/css/common.css" rel="stylesheet" type="text/css" />
+  <link href="common/css/common.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <section id="abstract">
@@ -2633,7 +2633,7 @@ <h3>Switch</h3>
         Choose the role that best matches both the visual design and semantics of the user interface.
         For instance, there are some circumstances where the semantics of <q>on or off</q> would be easier for assistive technology users to understand than the semantics of <q>checked or unchecked</q>, and vice versa.
         Consider a widget for turning lights on or off.
-        In this case, screen reader output of <q>Lights switch on</q> is more user friendly than <q>Lights checkbox checked</q>. 
+        In this case, screen reader output of <q>Lights switch on</q> is more user friendly than <q>Lights checkbox checked</q>.
         However, if the same input were in a group of inputs labeled <q>Which of the following must be included in your pre-takeoff procedures?</q>, <q>Lights checkbox checked</q> would make more sense.
       </p>
       <p>

diff --git a/examples/accordion/accordion.html b/examples/accordion/accordion.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<meta content="width=device-width, initial-scale=1.0" name="viewport" />
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
 <title>Accordion Example | WAI-ARIA Authoring Practices 1.2</title>
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -12,7 +12,7 @@
 <script src="../js/app.js"></script>
 
 <!--  js and css for this example. -->
-<link rel="stylesheet" type="text/css" href="css/accordion.css" />
+<link rel="stylesheet" type="text/css" href="css/accordion.css">
 
 </head>
 <body>
@@ -96,23 +96,23 @@ <h3>
             <fieldset>
               <p>
                 <label for="b-add1">Address 1:</label>
-                <input type="text" name="b-add1" id="b-add1" />
+                <input type="text" name="b-add1" id="b-add1">
               </p>
               <p>
                 <label for="b-add2">Address 2:</label>
-                <input type="text" name="b-add2" id="b-add2" />
+                <input type="text" name="b-add2" id="b-add2">
               </p>
               <p>
                 <label for="b-city">City:</label>
-                <input type="text" name="b-city" id="b-city" />
+                <input type="text" name="b-city" id="b-city">
               </p>
               <p>
                 <label for="b-state">State:</label>
-                <input type="text" name="b-state" id="b-state" />
+                <input type="text" name="b-state" id="b-state">
               </p>
               <p>
                 <label for="b-zip">Zip Code:</label>
-                <input type="text" name="b-zip" id="b-zip" />
+                <input type="text" name="b-zip" id="b-zip">
               </p>
             </fieldset>
           </div>
@@ -131,23 +131,23 @@ <h3>
             <fieldset>
               <p>
                 <label for="m-add1">Address 1:</label>
-                <input type="text" name="m-add1" id="m-add1" />
+                <input type="text" name="m-add1" id="m-add1">
               </p>
               <p>
                 <label for="m-add2">Address 2:</label>
-                <input type="text" name="m-add2" id="m-add2" />
+                <input type="text" name="m-add2" id="m-add2">
               </p>
               <p>
                 <label for="m-city">City:</label>
-                <input type="text" name="m-city" id="m-city" />
+                <input type="text" name="m-city" id="m-city">
               </p>
               <p>
                 <label for="m-state">State:</label>
-                <input type="text" name="m-state" id="m-state" />
+                <input type="text" name="m-state" id="m-state">
               </p>
               <p>
                 <label for="m-zip">Zip Code:</label>
-                <input type="text" name="m-zip" id="m-zip" />
+                <input type="text" name="m-zip" id="m-zip">
               </p>
             </fieldset>
           </div>

diff --git a/examples/alert/alert.html b/examples/alert/alert.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Alert Example | WAI-ARIA Authoring Practices 1.2</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->

diff --git a/examples/breadcrumb/index.html b/examples/breadcrumb/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.2</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->

diff --git a/examples/carousel/carousel-1-prev-next.html b/examples/carousel/carousel-1-prev-next.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Auto-Rotating Image Carousel Example with Buttons for Slide Control | WAI-ARIA Authoring Practices 1.2</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
@@ -126,7 +126,7 @@ <h2 id="ex_label">Example</h2>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam" />
+                        <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
                       </a>
                     </div>
 
@@ -148,7 +148,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall"/>
+                        <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
                       </a>
                     </div>
 
@@ -170,7 +170,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer."/>
+                        <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
                       </a>
                     </div>
 
@@ -192,7 +192,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera."/>
+                        <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
                       </a>
                     </div>
 
@@ -214,7 +214,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel."/>
+                        <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
                       </a>
                     </div>
 
@@ -235,7 +235,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#">
-                        <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set" />
+                        <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
                       </a>
                     </div>
 

diff --git a/examples/carousel/carousel-2-tablist.html b/examples/carousel/carousel-2-tablist.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Auto-Rotating Image Carousel with Tabs for Slide Control Example | WAI-ARIA Authoring Practices 1.2</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
@@ -190,7 +190,7 @@ <h2 id="ex_label">Example</h2>
 
                     <div class="carousel-image">
                       <a href="#" id="carousel-image-1">
-                        <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam" />
+                        <img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
                       </a>
                     </div>
 
@@ -216,7 +216,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#" id="carousel-image-2">
-                        <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall"/>
+                        <img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
                       </a>
                     </div>
 
@@ -242,7 +242,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#!" id="carousel-image-3">
-                        <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer."/>
+                        <img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
                       </a>
                     </div>
 
@@ -268,7 +268,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#" id="carousel-image-4">
-                        <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera."/>
+                        <img src="images/foyleswarslide__800x600.jpg" alt="A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.">
                       </a>
                     </div>
 
@@ -294,7 +294,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#" id="carousel-image-5">
-                        <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel."/>
+                        <img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
                       </a>
                     </div>
 
@@ -319,7 +319,7 @@ <h3>
 
                     <div class="carousel-image">
                       <a href="#" id="carousel-image-6">
-                        <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set" />
+                        <img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
                       </a>
                     </div>
 

diff --git a/examples/checkbox/checkbox-mixed.html b/examples/checkbox/checkbox-mixed.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
   <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <title>Checkbox Example (Mixed-State) | WAI-ARIA Authoring Practices 1.2</title>
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->

diff --git a/examples/checkbox/checkbox.html b/examples/checkbox/checkbox.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <meta charset="utf-8">
   <title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.2</title>
 
   <!--  Core js and css shared by all examples; do not modify when using this template. -->