Technigo · simfrisk · Mar 24, 2025 · Mar 25, 2025 · Mar 25, 2025 · Mar 25, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,9 +1,5 @@
 # Web Accessibility Project
 
-A basic web server template focused on web accessibility practices.
+Link to netlify: https://accessibility-simon-sofie.netlify.app/
 
-### Installation
-
-1. Fork this repository by clicking the "Fork" button at the top right of the GitHub repository page.
-
-2. Clone your forked repository
+Project by Simon and Sofie
diff --git a/about.html b/about.html
@@ -1,10 +1,187 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>About</title>
-    <link rel="stylesheet" href="css/styles.css" />
-  </head>
-  <body></body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0"
+  />
+  <title>About this quiz</title>
+  <link
+    rel="stylesheet"
+    href="css/color-palette.css"
+  />
+  <link
+    rel="stylesheet"
+    href="css/styles.css"
+  />
+  <!-- font awesome icons -->
+  <script
+    src="https://kit.fontawesome.com/beb1bc6f21.js"
+    crossorigin="anonymous"
+  ></script>
+  <script
+    src="./js/about.js"
+    defer
+  ></script>
+</head>
+
+<body id="body">
+  <a
+    href="#about-content"
+    class="skip-link"
+    tabindex="0"
+  >Skip to main content</a>
+
+  <header
+    role="banner"
+    tabindex="-1"
+  >
+    <button
+      id="menu-icon"
+      class="fas fa-bars"
+      aria-live="assertive"
+      aria-haspopup="true"
+      aria-expanded="false"
+      aria-controls="Menu"
+      aria-label="Open main menu"
+      tabindex="0"
+    ></button>
+    <nav
+      role="navigation"
+      aria-label="Main Menu"
+      id="nav-links"
+    >
+      <ul role="list">
+        <li
+          id="index-page2"
+          role="listitem"
+        ><a href="index.html">Home</a></li>
+        <li
+          id="about-page2"
+          role="listitem"
+        ><a
+            id="about-style"
+            href="about.html"
+          >About</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main
+    id="about-content"
+    role="main"
+  >
+    <section
+      id="about"
+      class=""
+      role="region"
+      aria-labelledby="about-text"
+    >
+      <div
+        class="speech-bubble"
+        role="img"
+        aria-labelledby="about-text"
+      >
+        <!-- A non descriptive image -->
+        <img
+          src="./img/speech-bubble.webp"
+          alt=""
+          aria-hidden="true"
+        />
+        <div class="title-text">
+          <h1
+            id="question-text"
+            class="question-text-about"
+            tabindex="0"
+          >How this Quiz is accessible</h1>
+        </div>
+      </div>
+      <ol role="list">
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>A "Skip to main content"</strong> link lets users bypass navigation and
+          go directly
+          to
+          the quiz.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >The quiz is fully <strong>keyboard-accessible</strong>, allowing users to
+          navigate and
+          select answers without a
+          mouse.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >A <strong>clean and simple layout</strong> ensures an easy-to-read experience
+          with minimal
+          distractions.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>ARIA labels</strong> enhance accessibility for screen readers.</li>
+        <li
+          tabindex="0"
+          role="listitem"
+        ><strong>Semantic HTML</strong> improves structure and readability for both
+          users and
+          assistive technologies.
+        </li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >
+          A <strong>dark mode option</strong> provides a high-contrast black background with white text for a more
+          comfortable viewing experience.
+        </li>
+        <li
+          tabindex="0"
+          role="listitem"
+        >A <strong>reduce motion option</strong> allows users to disable animations and
+          sliding
+          effects in the quiz, providing a more comfortable experience for anyone sensitive to motion.</li>
+      </ol>
+      <!-- A descriptive image -->
+      <div class="img-container">
+        <img
+          class="accessibility-img"
+          src="./img/web-accessibility-features.webp"
+          alt="Illustration of web accessibility features for this quiz"
+          role="img"
+        />
+      </div>
+    </section>
+  </main>
+  <footer role="contentinfo">
+    <nav
+      role="navigation"
+      aria-label="Footer menu"
+    >
+      <button
+        id="dark-mode-icon"
+        class="dark-mode-icon"
+        type="button"
+        aria-label="Toggle dark mode"
+      >
+        Dark mode
+      </button>
+      <p tabindex="0">
+        Project by Simon & Sofie
+        <a
+          tabindex="0"
+          href="https://github.com/simfrisk/accessibility-sofie-simon"
+          aria-label="GitHub repository for Accessibility Project by Simon & Sofie"
+        >
+          <i
+            class="fa-brands fa-github"
+            aria-hidden="true"
+          ></i>
+        </a>
+      </p>
+    </nav>
+  </footer>
+</body>
+
+</html>
diff --git a/css/color-palette.css b/css/color-palette.css
@@ -0,0 +1,14 @@
+:root {
+  --primary: #fdeb3f;
+  --secondary: #121212;
+  --complementary: #FFFFFF;
+  --font-primary: #121212;
+  --font-primary-fixed: #121212;
+}
+
+.dark-mode {
+  --primary: #121212;
+  --secondary: #FFFFFF;
+  --complementary: #121212;
+  --font-primary: #FFFFFF;
+}