diff options
| -rw-r--r-- | 404.html | 57 | ||||
| -rw-r--r-- | LICENSE | 21 | ||||
| -rw-r--r-- | README.md | 3 | ||||
| -rw-r--r-- | _assets/blob-header.sketch | bin | 0 -> 50331 bytes | |||
| -rwxr-xr-x | _assets/default-contract.pages | bin | 0 -> 360585 bytes | |||
| -rw-r--r-- | _assets/default-contract.pdf | bin | 0 -> 26702 bytes | |||
| -rw-r--r-- | _assets/dots.sketch | bin | 0 -> 58649 bytes | |||
| -rw-r--r-- | _assets/icon-only.sketch | bin | 0 -> 8450 bytes | |||
| -rw-r--r-- | _assets/logo.sketch | bin | 0 -> 24019 bytes | |||
| -rw-r--r-- | apple-touch-icon-precomposed.png | bin | 0 -> 12674 bytes | |||
| -rw-r--r-- | favicon.png | bin | 0 -> 12674 bytes | |||
| -rw-r--r-- | images/blob-header.jpg | bin | 0 -> 156475 bytes | |||
| -rw-r--r-- | images/blob-header.svg | 22 | ||||
| -rw-r--r-- | images/dots-blue.png | bin | 0 -> 412 bytes | |||
| -rw-r--r-- | images/dots-purple.png | bin | 0 -> 4160 bytes | |||
| -rw-r--r-- | images/dots.png | bin | 0 -> 412 bytes | |||
| -rw-r--r-- | images/logo-icon.png | bin | 0 -> 12674 bytes | |||
| -rw-r--r-- | images/logo.png | bin | 0 -> 15872 bytes | |||
| -rw-r--r-- | images/logo.svg | 28 | ||||
| -rw-r--r-- | images/social-image.png | bin | 0 -> 5446 bytes | |||
| -rw-r--r-- | index.html | 302 | ||||
| -rw-r--r-- | style.css | 125 |
22 files changed, 558 insertions, 0 deletions
diff --git a/404.html b/404.html new file mode 100644 index 0000000..0687a85 --- /dev/null +++ b/404.html @@ -0,0 +1,57 @@ +<!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>404 | Website Audit Checklist</title> + <meta name="description" content="Oops! The page you're looking for doesn't seem to exist"> + <link rel="preload" href="style.css" as="style"> + <link rel="stylesheet" href="style.css"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/public/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 id="media"> + + <header role="banner"> + <a href="/" class="logo"></a> + <a href="#main" class="skip-content">Skip to content (Press Enter)</a> + </header> + + <main role="main" id="main"> + + <section role="heading" aria-label="Main heading"> + <h1>404</h1> + <p>Oops. The page you're looking for doesn't seem to exist.</p> + <a href="/" class="btn btn--btn-important">Return to Homepage</a> + </section> + + </main> + + <footer role="contentinfo"> + <p> + <small> + Made by <a href="https://bradleytaunt.com">Bradley Taunt</a>. © 2019 + <br> + This website does not track data or analytics. + </small> + </p> + </footer> + + <script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script> + +</body> +</html>
\ No newline at end of file @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Bradley Taunt + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..6450df2 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# webaudit + +Main files for the webaudit checklist website
\ No newline at end of file diff --git a/_assets/blob-header.sketch b/_assets/blob-header.sketch Binary files differnew file mode 100644 index 0000000..e1bab86 --- /dev/null +++ b/_assets/blob-header.sketch diff --git a/_assets/default-contract.pages b/_assets/default-contract.pages Binary files differnew file mode 100755 index 0000000..bf373a5 --- /dev/null +++ b/_assets/default-contract.pages diff --git a/_assets/default-contract.pdf b/_assets/default-contract.pdf Binary files differnew file mode 100644 index 0000000..f0fb98b --- /dev/null +++ b/_assets/default-contract.pdf diff --git a/_assets/dots.sketch b/_assets/dots.sketch Binary files differnew file mode 100644 index 0000000..d1ab4dc --- /dev/null +++ b/_assets/dots.sketch diff --git a/_assets/icon-only.sketch b/_assets/icon-only.sketch Binary files differnew file mode 100644 index 0000000..ee0e78d --- /dev/null +++ b/_assets/icon-only.sketch diff --git a/_assets/logo.sketch b/_assets/logo.sketch Binary files differnew file mode 100644 index 0000000..ffada70 --- /dev/null +++ b/_assets/logo.sketch diff --git a/apple-touch-icon-precomposed.png b/apple-touch-icon-precomposed.png Binary files differnew file mode 100644 index 0000000..d2bc39f --- /dev/null +++ b/apple-touch-icon-precomposed.png diff --git a/favicon.png b/favicon.png Binary files differnew file mode 100644 index 0000000..d2bc39f --- /dev/null +++ b/favicon.png diff --git a/images/blob-header.jpg b/images/blob-header.jpg Binary files differnew file mode 100644 index 0000000..308f249 --- /dev/null +++ b/images/blob-header.jpg diff --git a/images/blob-header.svg b/images/blob-header.svg new file mode 100644 index 0000000..85d7a6a --- /dev/null +++ b/images/blob-header.svg @@ -0,0 +1,22 @@ +<svg style="width: 100%; height: 641px;" preserveAspectRatio="none" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 857"> + <defs> + <path d="M0 892.505c308.829 32.498 548.829 7.536 720-74.885 171.171-82.422 411.171-104.978 720-67.668V0H0v892.505z" id="a"></path> + </defs> + <g fill="none" fill-rule="evenodd"> + <g> + <g id="Group-7" transform="translate(-56 -94)"> + <g> + <path d="M13 959.24c338.228 31.295 603.188-5.678 794.879-110.919 191.69-105.24 456.548-139.277 794.575-102.109L1621 208 37.542 247.031 13 959.241z" id="Path-Copy" fill="#DADAFD" transform="rotate(2 817 589)"></path> + <g transform="translate(56)"> + <mask fill="#fff"> + <use xlink:href="#a"></use> + </mask> + <use fill="#7070E6" xlink:href="#a"></use> + </g> + </g> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/images/dots-blue.png b/images/dots-blue.png Binary files differnew file mode 100644 index 0000000..8604a28 --- /dev/null +++ b/images/dots-blue.png diff --git a/images/dots-purple.png b/images/dots-purple.png Binary files differnew file mode 100644 index 0000000..41fb55d --- /dev/null +++ b/images/dots-purple.png diff --git a/images/dots.png b/images/dots.png Binary files differnew file mode 100644 index 0000000..acecb11 --- /dev/null +++ b/images/dots.png diff --git a/images/logo-icon.png b/images/logo-icon.png Binary files differnew file mode 100644 index 0000000..d2bc39f --- /dev/null +++ b/images/logo-icon.png diff --git a/images/logo.png b/images/logo.png Binary files differnew file mode 100644 index 0000000..9877b8b --- /dev/null +++ b/images/logo.png diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..c4d2a30 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="396px" height="80px" viewBox="0 0 396 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --> + <title>Full Logo</title> + <desc>Created with Sketch.</desc> + <defs> + <circle id="path-1" cx="40" cy="40" r="40"></circle> + </defs> + <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Webaud.it-Logo" transform="translate(-193.000000, -253.000000)"> + <g id="Full-Logo" transform="translate(193.000000, 253.000000)"> + <g id="Icon-Logo"> + <g id="Path"> + <mask id="mask-2" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <use id="Mask" fill="#1E90FF" xlink:href="#path-1"></use> + <polyline stroke="#FFFFFF" stroke-width="8.88888889" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-2)" points="80 8.88888889 35.5555556 53.3777778 22.2222222 40.0444444"></polyline> + </g> + </g> + <text id="webaud.it" font-family="AvenirNext-DemiBold, Avenir Next" font-size="64" font-weight="500" line-spacing="64"> + <tspan x="100" y="72" fill="#8C8C8C">web</tspan> + <tspan x="228.832" y="72" fill="#1E90FF">aud.it</tspan> + </text> + </g> + </g> + </g> +</svg>
\ No newline at end of file diff --git a/images/social-image.png b/images/social-image.png Binary files differnew file mode 100644 index 0000000..1d48e95 --- /dev/null +++ b/images/social-image.png 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 diff --git a/style.css b/style.css new file mode 100644 index 0000000..cf11699 --- /dev/null +++ b/style.css @@ -0,0 +1,125 @@ +* { + box-sizing: border-box; +} + +html { + line-height: 1.4; + -webkit-text-size-adjust: 100%; +} + +body { + background: white; + color: #444; + font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 18px; + margin: 0; + padding: 0 20px; +} +h1 { + align-items: center; + display: flex; + margin-top: 10px; +} +h1 img { + margin-right: 10px; + padding-top: 2px; + width: 30px; +} +h2 { + align-items: center; + background: #DDEAF0; + border-left: 10px solid #21759b; + color: #21759b; + display: flex; + justify-content: space-between; + margin-bottom: 40px; + padding: 10px 15px; + line-height: 1; +} +h2 svg { + height: 30px; +} +h2 svg path { + fill: #21759b; +} + +a,a:visited { + color: #21759b; +} +a:hover { + color: black; +} + +ul li, ol li { + margin-bottom: 10px; +} + +header, main, footer { + display: block; + margin: 0 auto 80px; + max-width: 720px; +} +header { + padding-top: 40px; +} +main section { + margin-bottom: 80px; +} +main section article { + margin-bottom: 60px; + padding-left: 10px; +} + +input[type="checkbox"] { + opacity: 0; + position: absolute; + z-index: -1; +} +input[type="checkbox"] + label { + cursor: pointer; + display: inline-block; + font-weight: bold; + padding-left: 36px; + position: relative; + user-select: none; + width: 100%; +} +input[type="checkbox"] + label:before { + background: white; + border: 3px solid lightgrey; + content:''; + height: 20px; + left: 0; + position: absolute; + top: calc(50% - 13px); + width: 20px; +} +input[type="checkbox"]:checked + label:before { + background-color: #21759b; + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+"); + background-repeat: no-repeat; + background-position: center; + background-size: 12px; + border-color: #21759b; +} +input[type="checkbox"]:focus + label:before { + border-color: #21759b; +} + +.skip-content { + background: #21759b; + color: white !important; + left: -9999px; + padding: 0.5rem; + position: absolute; + top: 0; +} +.skip-content:focus { + left: 1rem; +} + +footer { + border-top: 1px solid lightgrey; + padding-top: 20px; +} + |
