1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
|
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Website Audit Checklist</title>
<meta name="description" content="A website checklist to audit the formatting, performance, accessibility, and security of your web projects">
<meta name="keywords" content="web performance checklist, web accessibility checklist, html checklist, css checklit, javascript checklist, frontend checklist, developer checklist">
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon-precomposed.png">
<link rel="shortcut icon" href="favicon.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://webaud.it/">
<meta property="og:title" content="Website Audit Checklist">
<meta property="og:description" content="Frontend checklist to audit your website for proper formatting, performance, accessibility, and security standards">
<meta property="og:image" content="https://webaud.it/images/social-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://webaud.it/">
<meta property="twitter:title" content="Website Audit Checklist">
<meta property="twitter:description" content="Frontend checklist to audit your website for proper formatting, performance, accessibility, and security standards">
<meta property="twitter:image" content="https://webaud.it/images/social-image.png">
<meta property="copyright" content="© 2006-2019 Bradley Taunt">
</head>
<body>
<header role="banner">
<a href="#main" class="skip-content">Skip to content (Press Enter)</a>
<h1><img src="images/logo-icon.png" alt="Web Audit"> Web Audit</h1>
<p><strong>Easily audit your website.</strong></p>
<p>A simplified and easy-to-use item checklist to audit your website for proper formatting, performance, accessibility, and security standards.</p>
</header>
<main role="main" id="main">
<!-- Formatting -->
<section class="first-section" role="region" aria-label="Formatting section">
<h2>
<span>Formatting</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path></svg>
</h2>
<div class="formatting-container">
<!-- Language -->
<article role="article">
<input id="lang" type="checkbox">
<label class="complete-label" for="lang"><span>Language & Directionality</span></label>
<p>All pages are set with a proper <code>!DOCTYPE</code> and have language and reading directionality attributes defined.</p>
<ul>
<li><a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang" target="_blank">Learn about language attributes</a></li>
<li><a rel="noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir" target="_blank">Learn about directionality attributes</a></li>
</ul>
</article>
<!-- Meta Tags -->
<article role="article">
<input id="meta-tags" type="checkbox">
<label class="complete-label" for="meta-tags"><span>Meta Tags</span></label>
<p>Title and description tags are present across the entire project. Social meta links and favicons are included on all pages. Viewport meta tag is setup according to the project's requirements.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">Meta tags explained</a></li>
<li><a rel="noreferrer" target="_blank" href="https://metatags.io">Generate meta tags, favicons and social media imagery</a></li>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag">Learn about the viewport meta tag</a></li>
</ul>
</article>
<!-- Style & Script -->
<article role="article">
<input id="style-script" type="checkbox">
<label class="complete-label" for="style-script"><span>Style & Script Placement</span></label>
<p>All CSS tags are positioned ahead of all JS tags in the DOM structure.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing">Proper ordering for CSS and JavaScript</a></li>
</ul>
</article>
<!-- Responsive -->
<article role="article">
<input id="responsive-d" type="checkbox">
<label class="complete-label" for="responsive-d"><span>Responsive Design</span></label>
<p>Project layout design adapts to all devices and viewport sizes. Interactive elements work as expected in both desktop and mobile experiences. All content is available regardless of device type.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">Learn about CSS media queries</a></li>
<li><a rel="noreferrer" target="_blank" href="http://mattkersley.com/responsive/">Testing responsive designs</a></li>
</ul>
</article>
</div>
</section>
<section role="region" aria-label="Performance section">
<h2>
<span>Performance</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32C128.94 32 0 160.94 0 320c0 52.8 14.25 102.26 39.06 144.8 5.61 9.62 16.3 15.2 27.44 15.2h443c11.14 0 21.83-5.58 27.44-15.2C561.75 422.26 576 372.8 576 320c0-159.06-128.94-288-288-288zm0 64c14.71 0 26.58 10.13 30.32 23.65-1.11 2.26-2.64 4.23-3.45 6.67l-9.22 27.67c-5.13 3.49-10.97 6.01-17.64 6.01-17.67 0-32-14.33-32-32S270.33 96 288 96zM96 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm48-160c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm246.77-72.41l-61.33 184C343.13 347.33 352 364.54 352 384c0 11.72-3.38 22.55-8.88 32H232.88c-5.5-9.45-8.88-20.28-8.88-32 0-33.94 26.5-61.43 59.9-63.59l61.34-184.01c4.17-12.56 17.73-19.45 30.36-15.17 12.57 4.19 19.35 17.79 15.17 30.36zm14.66 57.2l15.52-46.55c3.47-1.29 7.13-2.23 11.05-2.23 17.67 0 32 14.33 32 32s-14.33 32-32 32c-11.38-.01-20.89-6.28-26.57-15.22zM480 384c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"></path></svg>
</h2>
<div class="performance-container">
<!-- HTML Optimization -->
<article role="article">
<input id="html-o" type="checkbox">
<label class="complete-label" for="html-o"><span>HTML Optimization</span></label>
<p>The HTML code is minified, unnecessary comments are deleted and overly explicit attributes are removed.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.npmjs.com/package/html-minifier">HTML Minifier (npm)</a></li>
<li><a rel="noreferrer" target="_blank" href="https://css-tricks.com/the-script-tag/">Learn about the script tag</a></li>
</ul>
</article>
<!-- CSS Optimization -->
<article role="article">
<input id="css-o" type="checkbox">
<label class="complete-label" for="css-o"><span>CSS Optimization</span></label>
<p>The CSS code is minified and set to <code>preload</code>. Unused CSS is removed and critical styling is setup appropriately. There are no embedded or inline CSS styles.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.npmjs.com/package/clean-css">Clean-CSS (npm)</a></li>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Learn about CSS preload attribute</a></li>
</ul>
</article>
<!-- JavaScript Optimization -->
<article role="article">
<input id="js-o" type="checkbox">
<label class="complete-label" for="js-o"><span>JavaScript Optimization</span></label>
<p>All JavaScript is minified, concatenated into a single file (if applicable) and non-blocking with the use of <code>defer</code> and <code>async</code>.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.npmjs.com/package/uglify-js">UglifyJS (npm)</a></li>
<li><a rel="noreferrer" target="_blank" href="https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/">Learn about defer and async</a></li>
</ul>
</article>
<!-- Images -->
<article role="article">
<input id="image-o" type="checkbox">
<label class="complete-label" for="image-o"><span>Image Optimization</span></label>
<p>All images are optimized and compressed for each device screen size without direct impact to the end user. Offscreen images are handled via lazy loading and image attributes <code>height</code> / <code>width</code> are set when applicable. Proper <code>alt</code> tags are also included.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/">Learn about lazy loading images</a></li>
<li><a rel="noreferrer" target="_blank" href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Setup dynamic responsive images</a></li>
</ul>
</article>
<!-- Font -->
<article role="article">
<input id="webfont-o" type="checkbox">
<label class="complete-label" for="webfont-o"><span>Webfont Optimization</span></label>
<p>Custom fonts do not exceed 300kb, use WOFF2 formatting, are set with <code>preconnect</code> to load faster, and avoid FOIT / FOUT / FOFT.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/">Setting up webfonts to use preconnect</a></li>
<li><a rel="noreferrer" target="_blank" href="https://css-tricks.com/fout-foit-foft/">How to avoid FOIT, FOUT, FOFT</a></li>
</ul>
</article>
<!-- HTTP Requests -->
<article role="article">
<input id="http-r" type="checkbox">
<label class="complete-label" for="http-r"><span>Minimize HTTP Requests</span></label>
<p>Only the most essential files are delivered to the end user.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://blog.hubspot.com/marketing/reduce-http-requests">Reducing total HTTP requests</a></li>
</ul>
</article>
<!-- CDN -->
<article role="article">
<input id="cdn" type="checkbox">
<label class="complete-label" for="cdn"><span>Deliver Assets Through CDN</span></label>
<p>CDN is used to deliver content faster to the end user. HTTP caching is also utilized for subsequent visits.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.digitalocean.com/community/tutorials/using-a-cdn-to-speed-up-static-content-delivery">Using a CDN to speed up content delivery</a></li>
</ul>
</article>
<!-- GZIP -->
<article role="article">
<input id="gzip" type="checkbox">
<label class="complete-label" for="gzip"><span>Enable GZIP / Brotli Compression</span></label>
<p>The server is setup with GZIP or Brotli compression enabled.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/">Implementing GZIP compression</a></li>
<li><a rel="noreferrer" target="_blank" href="https://github.com/google/brotli">Brotli compression</a></li>
</ul>
</article>
</div>
</section>
<section role="region" aria-label="Accessibility section">
<h2>
<span>Accessibility</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48c114.953 0 208 93.029 208 208 0 114.953-93.029 208-208 208-114.953 0-208-93.029-208-208 0-114.953 93.029-208 208-208m0-40C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 56C149.961 64 64 149.961 64 256s85.961 192 192 192 192-85.961 192-192S362.039 64 256 64zm0 44c19.882 0 36 16.118 36 36s-16.118 36-36 36-36-16.118-36-36 16.118-36 36-36zm117.741 98.023c-28.712 6.779-55.511 12.748-82.14 15.807.851 101.023 12.306 123.052 25.037 155.621 3.617 9.26-.957 19.698-10.217 23.315-9.261 3.617-19.699-.957-23.316-10.217-8.705-22.308-17.086-40.636-22.261-78.549h-9.686c-5.167 37.851-13.534 56.208-22.262 78.549-3.615 9.255-14.05 13.836-23.315 10.217-9.26-3.617-13.834-14.056-10.217-23.315 12.713-32.541 24.185-54.541 25.037-155.621-26.629-3.058-53.428-9.027-82.141-15.807-8.6-2.031-13.926-10.648-11.895-19.249s10.647-13.926 19.249-11.895c96.686 22.829 124.283 22.783 220.775 0 8.599-2.03 17.218 3.294 19.249 11.895 2.029 8.601-3.297 17.219-11.897 19.249z"></path></svg>
</h2>
<div class="accessibility-container">
<!-- Progressive Enhancement -->
<article role="article">
<input id="prog" type="checkbox">
<label class="complete-label" for="prog"><span>Progressive Enhancement</span></label>
<p>All major functionality like navigation and search fields work without JavaScript enabled. Keyboard-only navigation is also fully supported across the project. A <code>404</code> error page is also setup correctly.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.shopify.ca/partners/blog/what-is-progressive-enhancement-and-why-should-you-care">The importance of progressive enhancement</a></li>
<li><a rel="noreferrer" target=_blank href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/404">404 HTTP status</a></li>
</ul>
</article>
<!-- Color Contrast -->
<article role="article">
<input id="contrast" type="checkbox">
<label class="complete-label" for="contrast"><span>Color Contrast</span></label>
<p>Project color contrast passes WCAG AA on desktop and AAA on mobile.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web content accessibility guidelines</a></li>
<li><a rel="noreferrer" target="_blank" href="https://webaim.org/resources/contrastchecker/">Color contrast checker</a></li>
</ul>
</article>
<!-- HTML5 Inputs -->
<article role="article">
<input id="html5-inputs" type="checkbox">
<label class="complete-label" for="html5-inputs"><span>HTML5 Specific Inputs</span></label>
<p>Proper input types are set for corresponding fields. Custom keyboard types are supported and working properly on mobile devices.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="http://html5doctor.com/html5-forms-input-types/">Supported HTML5 input types</a></li>
</ul>
</article>
<!-- Screen Readers -->
<article role="article">
<input id="screen-reader" type="checkbox">
<label class="complete-label" for="screen-reader"><span>Screen Reader Support (ARIA)</span></label>
<p>All pages work with standard screen readers (such as JAWS, VoiceOver, and NVDA). Elements are configured with proper <code>role</code> and <code>aria</code> attributes.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://a11yproject.com/posts/aria-landmark-roles/">ARIA Landmark roles and HTML5 implicit mapping</a></li>
<li><a rel="noreferrer" target="_blank" href="https://www.powermapper.com/tests/screen-readers/aria/">Screen reader compatibility list</a></li>
</ul>
</article>
</div>
</section>
<section role="region" aria-label="Security section">
<h2>
<span>Security</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>
</h2>
<div class="security-container">
<!-- SSL -->
<article role="article">
<input id="ssl" type="checkbox">
<label class="complete-label" for="ssl"><span>SSL Certificate</span></label>
<p>Website has a valid SSL certificate and all URLs are passed through HTTPS protocol.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://letsencrypt.org">Setup free SSL certificate</a></li>
</ul>
</article>
<!-- Passwords -->
<article role="article">
<input id="admin-passwords" type="checkbox">
<label class="complete-label" for="admin-passwords"><span>Secure Passwords</span></label>
<p>All database / CMS administrative passwords are strong and secure.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://edu.gcfglobal.org/en/internetsafety/creating-strong-passwords/1/">Creating strong passwords</a></li>
</ul>
</article>
<!-- Database -->
<article role="article">
<input id="backup" type="checkbox">
<label class="complete-label" for="backup"><span>Website & Database Backups</span></label>
<p>Project files and associated databases are backed-up regularly. Automated recovery builds are highly suggested.</p>
<ul>
<li><a rel="noreferrer" target="_blank" href="https://bup.github.io">Bup - backup system based on git</a></li>
<li><a rel="noreferrer" target="_blank" target=_blank href="https://www.wpbeginner.com/plugins/7-best-wordpress-backup-plugins-compared-pros-and-cons/">WordPress backup services</a></li>
</ul>
</article>
</div>
</section>
</main>
<footer role="contentinfo">
<p>
<small>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.
<br>
The <a href="https://git.btxx.org/webaudit">code for this site</a> is MIT.
<br>
Made by <a href="https://btxx.org">Bradley Taunt</a> with ♥ for the web.
<br>
This website does not track data or analytics.
</small>
</p>
</footer>
</body>
</html>
|
