Merge pull request #2 from dandrewbarlow/dev

added auditing content

src/components/content.tsx

@@ -11,6 +11,7 @@ import { Component } from 'react'
 import Why from "../content/why"
 import Tenets from "../content/tenets"
 import Practices from "../content/practices"
+import Auditing from "../content/auditing"
 
 
 // Content class with one state var to control which content is rendered
@@ -47,6 +48,9 @@ export default class Content extends Component<{}, { content: string }> {
       case "practices":
         return <Practices />;
 
+      case "auditing":
+        return <Auditing />;
+
       default:
         return <Why />;
     }
@@ -60,6 +64,7 @@ export default class Content extends Component<{}, { content: string }> {
             {this.renderLink("Why Universal Design?", "why")}
             {this.renderLink("Tenets", "tenets")}
             {this.renderLink("Practices", "practices")}
+            {this.renderLink("Auditing", "auditing")}
           </ul>
         </nav>
         {this.renderContent(this.state.content)}

src/content/auditing.tsx

@@ -0,0 +1,56 @@
+// Andrew Barlow
+// auditing.tsx
+// content for the practices of universal design
+// Universal Design
+// 2021
+
+// Content Section: Auditing for Universal Design
+export default function Auditing() {
+    return (
+        <section>
+            <h2>Auditing for Universal Design</h2>
+
+            <p>
+                There are a lot of tools that make it extremely easy to verify if your site is up to modern standards of accessibility.
+            </p>
+
+            <h3>
+                <a href="https://wave.webaim.org/"><abbr title="Web Accessibility Evaluation Tool">WAVE</abbr></a>
+            </h3>
+
+            <p>
+                WAVE is a web service that provides automated tools to check for common accessibility no-no's. It provides an extension for both chrome and Firefox browsers, and can alternatively be used on any site using their web address.
+            </p>
+
+            <h3>
+                <a href="https://www.deque.com/axe/devtools/">AXE DevTools</a>
+            </h3>
+
+            <p>
+                A paid alternative for professional developers is deque's AXE plugin. I have no personal experience with this one, but I've heard good things, and the promotional site has an impressive feature list.
+            </p>
+
+            <h3>
+                Chrome Lighthouse
+            </h3>
+
+            <p>
+                Google Chrome has a special feature included with their developer tools. By going to the normal development menu (right click `{'->'}` inspect element), you can find it as the far right menu item. You can then generate a report that scores your website based on:
+
+                <ul>
+                    <li>Performance</li>
+                    <li>Accessibility</li>
+                    <li>Best Practices</li>
+                    <li> <abbr title="Search Engine Optimization">SEO</abbr> </li>
+                    <li>Progressive Web App (when applicable)</li>
+                </ul>
+            </p>
+
+            <p> 
+                While none of these tools are the final word in accessible web design, they provide a very comprehensive set of tools by which to judge a website.
+            </p>
+
+
+        </section>
+   )
+}

src/content/practices.jsx

@@ -118,8 +118,9 @@ export default function Practices() {
             Lastly I would like to guarantee that whatever you're doing, there's a tag for that. I used a simple example, but{" "} <a href="https://www.w3schools.com/TAGS/default.ASP"> the w3schools website has an excellent reference </a>{" "} to the multitude of available tags
             </li>
 
-            <li></li>
         </ul>
+
+
         </section>
     );
 }

src/content/tenets.tsx

@@ -33,7 +33,7 @@ export default function Tenets() {
 
             <p>Here are some of the principles that define universal design:</p>
 
-            <h3>Tenets</h3>
+            <h3>Principles</h3>
             <ul>
                 <li>Equitable use</li>
                 <li>Flexibility in use</li>

src/scss/App.scss

@@ -17,7 +17,7 @@ $copy-font-size: 14pt;
 $background-color: #3b69ad;
 $shadow: #0b3b83;
 $text-color: #f7fce3;
-$text-highlight: #fa7461;
+$text-highlight: #fdff8d;
 $heading-color: #000000;
 $link-color: #4890fa;
 $link-shadow: #afccf7;
@@ -29,11 +29,11 @@ $link-shadow: #afccf7;
 }
 
 a {
-  color: #ffa200;
+  color: $text-highlight;
 }
 
 a:visited {
-  color: #d3dfff;
+  color: #f58cff;
 }
 
 body {
@@ -55,7 +55,7 @@ header {
   color: $heading-color;
   h1 {
     padding: 0.5em;
-    background-color: $text-color;
+    background-color: #f7fce3;
   }
 }
 
@@ -105,6 +105,8 @@ section {
   padding: 1em;
   line-height: 2em;
 
+  // color: black;
+
   nav {
     margin-left: 25%;
     font-size: $copy-font-size;
@@ -141,6 +143,7 @@ section {
   code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
       monospace;
+    // color: white;
     text-align: center;
     background-color: $shadow;
     padding: 0.3em;