Skip to content

Commit 858e6ab

Browse files
zcorpanmzgoddardhoward-e
authored
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]>
1 parent 2dfecb0 commit 858e6ab

File tree

78 files changed

+267
-267
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+267
-267
lines changed

‎.htmlhintrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"attr-value-not-empty": false,
88
"doctype-first": true,
99
"doctype-html5": true,
10+
"empty-tag-not-self-closed": true,
1011
"head-script-disabled": false,
1112
"href-abs-or-rel": false,
1213
"id-class-ad-disabled": false,

‎aria-practices-DeletedSectionsArchive.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
2+
<html lang="en-US">
33
<head>
44
<title>Content Deleted From WAI-ARIA Authoring Practices 1.1</title>
5-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
66
<script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
77
<script src="common/script/resolveReferences.js" class="remove"></script>
88
<script src="common/biblio.js" class="remove"></script>
@@ -166,7 +166,7 @@
166166
preProcess: [linkCrossReferences],
167167
};
168168
</script>
169-
<link href="common/css/common.css" rel="stylesheet" type="text/css" />
169+
<link href="common/css/common.css" rel="stylesheet">
170170
</head>
171171
<body>
172172
<section id="abstract">
@@ -2837,7 +2837,7 @@ <h3> The Problem</h3>
28372837
behavior of the element. The user agent's default behavior at the
28382838
document element forms the controller. </p>
28392839
<figure id="fig1">
2840-
<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"/>
2840+
<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">
28412841
<figcaption>Accessibility Interoperability at a <abbr title="document object model">DOM</abbr> Node without JavaScript</figcaption>
28422842
</figure>
28432843
<p id="desc_fig1">The box between the DOM node
@@ -2850,7 +2850,7 @@ <h3> The Problem</h3>
28502850
information, and relations). For HTML and other W3C markup, the
28512851
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>
28522852
<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>
2853-
<figure id="fig2"><img alt="DOM Element with JavaScript controller" height="502" longdesc="#desc_fig2" src="img/accessibleJSelement.png" width="476"/>
2853+
<figure id="fig2"><img alt="DOM Element with JavaScript controller" height="502" longdesc="#desc_fig2" src="img/accessibleJSelement.png" width="476">
28542854
<figcaption>Accessibility
28552855
Interoperability at a DOM Node with JavaScript</figcaption></figure>
28562856
<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>
33083308
user to view a list of navigation landmarks.
33093309
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
33103310
corresponding document section to be highlighted. The title for each navigation region displays in the list.</p>
3311-
<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"/>
3311+
<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">
33123312
<figcaption>Table of Contents generated from navigation landmarks in the header</figcaption>
33133313
</figure>
33143314
<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
33323332
W3C standards-based approach to represent this information.</p>
33333333
<figure id="fig4">
33343334
<!-- <embed src="resourcemap.svg" width="810" height="800"> -->
3335-
<img alt="Sample Semantic Map for Taxonomy" height="564" longdesc="#desc_fig4" src="img/taxonomy.png" title="Sample Semantic Map for Taxonomy" width="500"/>
3335+
<img alt="Sample Semantic Map for Taxonomy" height="564" longdesc="#desc_fig4" src="img/taxonomy.png" title="Sample Semantic Map for Taxonomy" width="500">
33363336
<figcaption>Example, Partial RDF Map for a possible ButtonUndo role as an extended role to WAI-ARIA</figcaption>
33373337
</figure>
33383338
<p id="desc_fig4"> <a href="#fig4"></a> shows a basic RDF mapping that
@@ -3372,7 +3372,7 @@ <h4> Interoperability Example: Grid Role </h4>
33723372
The user uses arrow keys to navigates the data grid and among the page tabs.
33733373
Using the Tab key, a user navigates between the notebook tab, the edit fields, buttons, and
33743374
the data grid.</p>
3375-
<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"/>
3375+
<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">
33763376
<figcaption>DHTML Example</figcaption>
33773377
</figure>
33783378
<p id="desc_fig5"> Accessible role and state
@@ -3383,7 +3383,7 @@ <h4> Interoperability Example: Grid Role </h4>
33833383
the Microsoft Active Accessibility rendering of the new
33843384
accessibility markup provided on the DataGrid page tab which has
33853385
focus.</p>
3386-
<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"/>
3386+
<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">
33873387
<figcaption>Microsoft Inspect Tool rendering of the page tab
33883388
DataGrid</figcaption>
33893389
</figure>
@@ -3502,7 +3502,7 @@ <h3>Building Accessible Applications with <abbr title="Accessible Rich Internet
35023502
</ol>
35033503
<section id="exampletree">
35043504
<h3>Example: Building a Tree Widget</h3>
3505-
<img alt="Graphic of an example tree view." class="role-screenshot" src="img/exampletree.png" width="188" height="327" />
3505+
<img alt="Graphic of an example tree view." class="role-screenshot" src="img/exampletree.png" width="188" height="327">
35063506
<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>
35073507
<p>To make this feature accessible we need to:</p>
35083508
<ul>
@@ -3639,7 +3639,7 @@ <h3> Technical Benefits </h3>
36393639
<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>
36403640
<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>
36413641
<figure id="fig7">
3642-
<!--<img alt="WAI-ARIA tree widget usability comparison" class="figure" src="img/style_aria.jpg" title="tree widget comparison"/>-->
3642+
<!--<img alt="WAI-ARIA tree widget usability comparison" class="figure" src="img/style_aria.jpg" title="tree widget comparison">-->
36433643
<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>
36443644
<figcaption>Usability of Tree Widget Using WAI-ARIA Semantics to Implement WCAG 2.0 Guidelines Compared to WCAG 1.0 Without WAI-ARIA</figcaption>
36453645
</figure>

‎aria-practices.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
2+
<html lang="en-US">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>WAI-ARIA Authoring Practices 1.2</title>
66
<script src="common/script/resolveReferences.js" class="remove"></script>
77
<script src="respec-config.js" class="remove"></script>
88
<script src="common/biblio.js" class="remove"></script>
99
<script src="https://www.w3.org/Tools/respec/respec-w3c" class="remove"></script>
10-
<link href="common/css/common.css" rel="stylesheet" type="text/css" />
10+
<link href="common/css/common.css" rel="stylesheet" type="text/css">
1111
</head>
1212
<body>
1313
<section id="abstract">
@@ -2633,7 +2633,7 @@ <h3>Switch</h3>
26332633
Choose the role that best matches both the visual design and semantics of the user interface.
26342634
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.
26352635
Consider a widget for turning lights on or off.
2636-
In this case, screen reader output of <q>Lights switch on</q> is more user friendly than <q>Lights checkbox checked</q>.
2636+
In this case, screen reader output of <q>Lights switch on</q> is more user friendly than <q>Lights checkbox checked</q>.
26372637
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.
26382638
</p>
26392639
<p>

‎examples/accordion/accordion.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5-
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
4+
<meta charset="UTF-8">
5+
<meta content="width=device-width, initial-scale=1.0" name="viewport">
66
<title>Accordion Example | WAI-ARIA Authoring Practices 1.2</title>
77
<!-- Core js and css shared by all examples; do not modify when using this template. -->
88
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
@@ -12,7 +12,7 @@
1212
<script src="../js/app.js"></script>
1313

1414
<!-- js and css for this example. -->
15-
<link rel="stylesheet" type="text/css" href="css/accordion.css" />
15+
<link rel="stylesheet" type="text/css" href="css/accordion.css">
1616

1717
</head>
1818
<body>
@@ -96,23 +96,23 @@ <h3>
9696
<fieldset>
9797
<p>
9898
<label for="b-add1">Address 1:</label>
99-
<input type="text" name="b-add1" id="b-add1" />
99+
<input type="text" name="b-add1" id="b-add1">
100100
</p>
101101
<p>
102102
<label for="b-add2">Address 2:</label>
103-
<input type="text" name="b-add2" id="b-add2" />
103+
<input type="text" name="b-add2" id="b-add2">
104104
</p>
105105
<p>
106106
<label for="b-city">City:</label>
107-
<input type="text" name="b-city" id="b-city" />
107+
<input type="text" name="b-city" id="b-city">
108108
</p>
109109
<p>
110110
<label for="b-state">State:</label>
111-
<input type="text" name="b-state" id="b-state" />
111+
<input type="text" name="b-state" id="b-state">
112112
</p>
113113
<p>
114114
<label for="b-zip">Zip Code:</label>
115-
<input type="text" name="b-zip" id="b-zip" />
115+
<input type="text" name="b-zip" id="b-zip">
116116
</p>
117117
</fieldset>
118118
</div>
@@ -131,23 +131,23 @@ <h3>
131131
<fieldset>
132132
<p>
133133
<label for="m-add1">Address 1:</label>
134-
<input type="text" name="m-add1" id="m-add1" />
134+
<input type="text" name="m-add1" id="m-add1">
135135
</p>
136136
<p>
137137
<label for="m-add2">Address 2:</label>
138-
<input type="text" name="m-add2" id="m-add2" />
138+
<input type="text" name="m-add2" id="m-add2">
139139
</p>
140140
<p>
141141
<label for="m-city">City:</label>
142-
<input type="text" name="m-city" id="m-city" />
142+
<input type="text" name="m-city" id="m-city">
143143
</p>
144144
<p>
145145
<label for="m-state">State:</label>
146-
<input type="text" name="m-state" id="m-state" />
146+
<input type="text" name="m-state" id="m-state">
147147
</p>
148148
<p>
149149
<label for="m-zip">Zip Code:</label>
150-
<input type="text" name="m-zip" id="m-zip" />
150+
<input type="text" name="m-zip" id="m-zip">
151151
</p>
152152
</fieldset>
153153
</div>

‎examples/alert/alert.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Alert Example | WAI-ARIA Authoring Practices 1.2</title>
66

77
<!-- Core js and css shared by all examples; do not modify when using this template. -->

‎examples/breadcrumb/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Breadcrumb Example | WAI-ARIA Authoring Practices 1.2</title>
66

77
<!-- Core js and css shared by all examples; do not modify when using this template. -->

‎examples/carousel/carousel-1-prev-next.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<!DOCTYPE html>
33
<html lang="en">
44
<head>
5-
<meta charset="utf-8" />
5+
<meta charset="utf-8">
66
<title>Auto-Rotating Image Carousel Example with Buttons for Slide Control | WAI-ARIA Authoring Practices 1.2</title>
77

88
<!-- 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>
126126

127127
<div class="carousel-image">
128128
<a href="#">
129-
<img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam" />
129+
<img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
130130
</a>
131131
</div>
132132

@@ -148,7 +148,7 @@ <h3>
148148

149149
<div class="carousel-image">
150150
<a href="#">
151-
<img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall"/>
151+
<img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
152152
</a>
153153
</div>
154154

@@ -170,7 +170,7 @@ <h3>
170170

171171
<div class="carousel-image">
172172
<a href="#">
173-
<img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer."/>
173+
<img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
174174
</a>
175175
</div>
176176

@@ -192,7 +192,7 @@ <h3>
192192

193193
<div class="carousel-image">
194194
<a href="#">
195-
<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."/>
195+
<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.">
196196
</a>
197197
</div>
198198

@@ -214,7 +214,7 @@ <h3>
214214

215215
<div class="carousel-image">
216216
<a href="#">
217-
<img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel."/>
217+
<img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
218218
</a>
219219
</div>
220220

@@ -235,7 +235,7 @@ <h3>
235235

236236
<div class="carousel-image">
237237
<a href="#">
238-
<img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set" />
238+
<img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
239239
</a>
240240
</div>
241241

‎examples/carousel/carousel-2-tablist.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Auto-Rotating Image Carousel with Tabs for Slide Control Example | WAI-ARIA Authoring Practices 1.2</title>
66

77
<!-- 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>
190190

191191
<div class="carousel-image">
192192
<a href="#" id="carousel-image-1">
193-
<img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam" />
193+
<img src="images/amsterdamslide__800x600.jpg" alt="Walking Tour in Amsterdam">
194194
</a>
195195
</div>
196196

@@ -216,7 +216,7 @@ <h3>
216216

217217
<div class="carousel-image">
218218
<a href="#" id="carousel-image-2">
219-
<img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall"/>
219+
<img src="images/lands-endslide__800x600.jpg" alt="Land&#039;s End in Cornwall">
220220
</a>
221221
</div>
222222

@@ -242,7 +242,7 @@ <h3>
242242

243243
<div class="carousel-image">
244244
<a href="#!" id="carousel-image-3">
245-
<img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer."/>
245+
<img src="images/trustslide-2__800x600.jpg" alt="Mom and daughter play Daniel Tiger game on notebook computer.">
246246
</a>
247247
</div>
248248

@@ -268,7 +268,7 @@ <h3>
268268

269269
<div class="carousel-image">
270270
<a href="#" id="carousel-image-4">
271-
<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."/>
271+
<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.">
272272
</a>
273273
</div>
274274

@@ -294,7 +294,7 @@ <h3>
294294

295295
<div class="carousel-image">
296296
<a href="#" id="carousel-image-5">
297-
<img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel."/>
297+
<img src="images/britcomdavidslide__800x600.jpg" alt="British flag with WILL-TV host David Thiel.">
298298
</a>
299299
</div>
300300

@@ -319,7 +319,7 @@ <h3>
319319

320320
<div class="carousel-image">
321321
<a href="#" id="carousel-image-6">
322-
<img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set" />
322+
<img src="images/mag800-2__800x600.jpg" alt="Mid-American Gardener panelists on the set">
323323
</a>
324324
</div>
325325

‎examples/checkbox/checkbox-mixed.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Checkbox Example (Mixed-State) | WAI-ARIA Authoring Practices 1.2</title>
66

77
<!-- Core js and css shared by all examples; do not modify when using this template. -->

‎examples/checkbox/checkbox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
4+
<meta charset="utf-8">
55
<title>Checkbox Example (Two State) | WAI-ARIA Authoring Practices 1.2</title>
66

77
<!-- Core js and css shared by all examples; do not modify when using this template. -->

0 commit comments

Comments
 (0)