diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 302 |
1 files changed, 302 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..b763b62 --- /dev/null +++ b/index.html @@ -0,0 +1,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.sr.ht/~bt/webaudit">code for this site</a> is <a href="https://git.sr.ht/~bt/webaudit/tree/master/item/LICENSE">MIT</a>. + <br> + Made by <a href="https://bt.ht">Bradley Taunt</a> with ♥ for the web. + <br> + This website does not track data or analytics. + </small> + </p> + </footer> + +</body> +</html>
\ No newline at end of file |